自定义组件中的动态class 在数据更新时(上拉加载)对应的wxss会失效
我想反馈一个 Bug
自定义组件中text标签(只有text标签会出现)的样式为动态数据 ,数据来自一个list,该页面绑定了上拉加载事件
会给list concat数据进去,当上拉加载触发,数据增多,之前数据绑定上的class对应的wxss代码无效
* 提供一个最简复现 Demo 代码如下:
component代码
“des.wxml”
<block wx:for="{{datas}}" wx:key="index">
<text class="des {{item.key}}">123123</text>
</block>
“des.js”
properties: {
datas: {
type: Array,
value: [],
observer: function (newVal, oldVal) {
}
},
},
“des.wxss”
.des {
font-size: 20px;
}
.des1 {
color: red;
/* background-position: 70% 44.4%; */
}
.des2 {
color: yellow;
/* background-position: 0 11.1%; */
}
.des3 {
color: green;
/* background-position: 20% 11.1%; */
}
text {
display: block;
}
“页面代码”
“test.wxml”
<!--pages/test/test.wxml-->
<view>
<view>123</view>
<des datas="{{data}}">567</des>
</view>
“test.js”
data: {
data: [{ "key": "des1" }, { "key": "des2" },
{ "key": "des3" }],
extraData: [{ "key": "des3" },
{ "key": "des1" }, { "key": "des1" }]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onReachBottom: function () {
let datas = this.data.data.concat(this.data.extraData)
this.setData({"data":datas})
},
下拉数据变化css无效 手机里也是同样的情况
期待回复。