收藏
回答

computedStyle 读取背景线性渐变linear-gradient异常

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 8.0.24 2.20.3
this.createSelectorQuery()
  .selectAll(this.selector)
  .fields({
    dataset: true,
    size: true,
    rect: true,
    computedStyle: ['background'], 
})

通过这种方式获取节点背景样式时,如果设置样式为

background: linear-gradient(to bottom, #FCF4E6, #FCF7EE);

但是获得的结果是

background"rgba(0, 0, 0, 0) linear-gradient(rgb(252, 244, 230), rgb(252, 247, 238)) repeat scroll 0% 0% / auto padding-box border-box"



to bottom 不见了,to top, to right, to left 是OK的

回答关注问题邀请回答
收藏

1 个回答

  • CRMEB
    CRMEB
    2023-10-31

    这个问题可能是由于uni-app在处理计算样式时,对于线性渐变的解析出现了问题。你可以尝试使用`getComputedStyleSync`方法来获取计算后的样式,然后手动解析背景属性。以下是一个示例:


    // 获取节点计算后的样式
    const computedStyle = uni.getComputedStyleSync(this.$refs[this.selector][0]);
    
    // 解析背景属性
    const background = computedStyle['background'];
    const gradientMatch = background.match(/linear-gradient\((.*?)\)/);
    const gradientParams = gradientMatch ? gradientMatch[1] : '';
    
    // 输出结果
    console.log('原始背景:', background);
    console.log('解析后的渐变参数:', gradientParams);
    


    这样你就可以得到正确的渐变参数,包括方向(to bottom, to top, to right, to left)。

    2023-10-31
    有用
    回复 1
    • 2023-10-31
      我这里用的是原生的小程序API,是获取到的值里面就没有渐变的第一个参数,直接就是颜色开始
      2023-10-31
      回复
登录 后发表内容