收藏
回答

自定义组件中的动态class 在数据更新时(上拉加载)对应的wxss会失效

框架类型 终端类型 操作系统 微信版本 基础库版本
小程序 客户端 6.6.1 1.9.1

我想反馈一个 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 个回答

  • terrorblade
    terrorblade
    2018-02-01

    可以回复下吗?

    2018-02-01
    有用 1
    回复
  • 薛冰
    薛冰
    2018-04-15

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

    2018-04-15
    有用
    回复
  • 李
    2018-03-12

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

    2018-03-12
    有用
    回复
  • swen
    swen
    2018-03-01

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

    2018-03-01
    有用
    回复
  • Sean
    Sean
    2018-03-01

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

    2018-03-01
    有用
    回复 2
    • Hemy
      Hemy
      2018-05-21
      还有别的方法吗
      2018-05-21
      回复
    • Sean
      Sean
      2018-05-21回复Hemy
      对于我们来说不太关注text的特性,所以都用view替换了,没有尝试别的方法。
      2018-05-21
      回复
登录 后发表内容