自定义组件中的动态class 在数据更新时(上拉加载)对应的wxss会失效
发布于 7 年前 作者 yong59 12314 次浏览 来自 问答

我想反馈一个 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无效 手机里也是同样的情况

期待回复。

5 回复

我还以为只有我有这种情况!

我还以为只有我有这种情况!

我还以为只有我有这种情况!

可以回复下吗?

遇到类似问题,自定义组件中的text标签,动态添加的class没有起效,控制台可以看到成功添加了类,但是样式没有生效.。改成view之后正常

回到顶部