uni-app 3.1.0版本动态绑定class失效了

uni-app 3.1.0版本动态绑定class失效了

开发环境 版本号 项目创建方式
Mac 10.15.3 HBuilderX

示例代码：

<swiper :circular="true" class="swiperBx" :current="current" @change="swiperChange" :indicator-dots="false" :autoplay="autoplay" :interval="3000" :duration="1000">
<swiper-item class="swiper-item" v-for="(item,index) in lists" @tap="app.toEvent(item)" :key="index">
<image class="img" :src="item.pic_url" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="dotPoint">
<text v-for="(item,index) in lists" :class="current===index?'dot dotCurr':'dot'" :key="index"></text>
</view>

操作步骤：

写个swiper获取当前页，赋值给current,写个指示点 动态根据current改变高亮样式

预期结果：

样式跟随当前页 变成高亮

实际结果：

样式没有任何变化

bug描述：

自定义轮播图都指示点，动态绑定class :class="current===index?‘dot dotCurr’:‘dot’"失效了


更多关于uni-app 3.1.0版本动态绑定class失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

提供一个可以运行的工程，我试试

更多关于uni-app 3.1.0版本动态绑定class失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在list 与 scrollw-view 动态修改样式会失效

回复 WbsPool: 好的，已初步定位

今天的3.1.1我发现解决了

没解决，默认关闭了新版样式编译器

你的是不是也在 list 组件里面？

HBuilderX 3.1.2 已经修复

根据你的描述，动态绑定class在uni-app 3.1.0版本失效的问题，可能是由于以下原因导致的：

  1. 首先确认current值是否正确更新。在swiperChange方法中打印current值，确保swiper滑动时current确实变化了。

  2. 检查样式是否被正确加载。尝试直接在元素上写死class="dot dotCurr"看样式是否生效。

  3. 建议修改动态class的写法为对象语法：

:class="{'dot': true, 'dotCurr': current === index}"

  1. 确保你的data中current初始值与swiper的current属性同步初始化。

  2. 检查CSS作用域问题，如果是scoped样式，可能需要使用/deep/或::v-deep穿透。

  3. 可以尝试在swiperChange方法中强制更新视图：

swiperChange(e) {
    this.current = e.detail.current;
    this.$forceUpdate();
}
回到顶部