PHP前端开发

uniapp如何设置动态样式

百变鹏仔 4周前 (11-20) #uniapp
文章标签 样式
uniapp设置动态样式的方法:1、用户点击按钮后动态切换按钮选中样式;2、给标签渲染多种颜色,代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。

本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。

推荐(免费):uni-app开发教程

uniapp设置动态样式的方法:

场景一:用户点击按钮后动态切换按钮选中样式(如图)

<view>    <view>已上线</view>    <view>未开始</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>{{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{ ... }