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的
这个问题可能是由于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)。