脚本宝典收集整理的这篇文章主要介绍了uniapp如何设置动态样式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
uniapp设置动态样式的方法:1、用户点击按钮后动态切换按钮选中样式;2、给标签渲染多种颜色,代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。
本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。
推荐(免费):uni-app开发教程
uniapp设置动态样式的方法:
场景一:用户点击按钮后动态切换按钮选中样式(如图)
<view class="state-BTn-content"> <view @tap="selectState" data-state="over" :class="[whichSelected=='over'?'state-btn-selected':'state-btn-noselect']">已上线</view> <view @tap="selectState" data-state="PRe" :class="[whichSelected=='pre'?'state-btn-selected':'state-btn-noselect']">未开始</view> </view> //选择状态 selectState(e){ this.whichSelected=e.currentTarget.dataset.state } .state-btn-content{ //wrITe your style .state-btn-selected{ ... } .state-btn-noselect{ ... } }
注:需要注意的就是一个标签里尽量不要同时用静态class与动态class,可能会造成兼容问题。最好只是用一种方式的,如上代码里为了实现动态改变样式只使用了:class
错误示范:<view @click="selectState" data-state="over" class="state-btn-noselect" :class="[whichSelected=='over'?'state-btn-selected':'']">已上线</view>
场景二:给标签渲染多种颜色(如图)
<view :class="['every-sign-item',`signstyle-${index%6}`]" v-for="(item,index) in preSignList" :key="index">{{item.name}}</view> .every-sign-item{ padding: 4rpx 16rpx; border-radius: 24rpx; font-Size: 24rpx; margin-right: 20rpx; margin-bottom: 20rpx; } .signstyle-0{ color: #3ac9e3; border: 1px solid #3ac9e3; } .signstyle-1{ color: #fd8888; border: 1px solid #fd8888; } .signstyle-2{ ... } .signstyle-3{ ... } .signstyle-4{ ... } .signstyle-5{ ... }
以上就是uniapp如何设置动态样式的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的uniapp如何设置动态样式全部内容,希望文章能够帮你解决uniapp如何设置动态样式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。