首页 建站教程 前端学院

uniapp如何设置动态样式

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


uniapp如何设置动态样式


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


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{ ... }



评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    uniapp如何设置动态样式

    uniapp如何设置动态样式

     2020-12-18 1172

    uniapp设置动态样式的方法:1、用户点击按钮后动态切换按钮选中样式;2、给标签渲染多种颜色,代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3;}】。本教程操作环境:win

    uniapp的云购商城源码/java电商系统APP源码

    uniapp的云购商城源码/java电商系统APP源码

     2021-12-06 154

    uniapp的云购商城源码,java开发的电商系统APP源码,界面看上去挺漂亮的,Java开发的系统,有兴趣的拿去学习学习。解压密码:zztuku.com

    动态壁纸小程序源码/带流量主壁纸分享类小程序源码

    动态壁纸小程序源码/带流量主壁纸分享类小程序源码

     2021-11-10 133

    新版动态壁纸小程序源码,可增加流量主,壁纸分享类小程序源码,无需服务器,直接使用微信开发者工具打开然后上传审核就可以了。另外记得把以下的域名添加到小程序后台的合法域名里面即可https://api.bmobcloud.com;https:/

    Nodejs框架+uniapp前端微商个人相册多端小程序源码

    Nodejs框架+uniapp前端微商个人相册多端小程序源码

     2021-10-27 216

    微商个人相册多端小程序源码,用于个人相册展示,适合微商,有客服联系,无需后台管理系统,小程序上直接进行管理,没有登录账号只拥有查看功能。功能介绍:1、首页进行相册展示,采用分页2、列表页面以文字形式进行分类,管理员可进行添加,修改和排序3、

    新版众人帮/赏金赚/悬赏猫任务平台源码/uniapp可打包双端APP

    新版众人帮/赏金赚/悬赏猫任务平台源码/uniapp可打包双端APP

     2021-04-30 265

    新版众人帮、赏金赚、悬赏猫任务平台源码,uniapp源码,可打包双端APP。新版本全新前端源码UI体验!功能介绍:前端可发布任务,PaysApi个人免签支付!后台发布关注点赞任务,然后会员接单,完成有佣金,不同级别的会员每天接的数量不一样,

    壁纸头像/动态壁纸小程序源码-支持用户投稿-带部分采集功能+视频搭建教程

    壁纸头像/动态壁纸小程序源码-支持用户投稿-带部分采集功能+视频搭建教程

     2021-08-04 315

    今天分享一套背景墙/头像/动态壁纸小程序源码,源码使用dcloud云开发(云开发优势:无需服务器域名直接搭建部署即可,成本低方便维护。)支持微信QQ双端小程序也就是说可以打包成微信小程序也可以打包成QQ小程序相当于一码二用,非常划算。支持用