首页 建站教程 前端学院

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开发的多端影视APP/对接的苹果CMS

    Uniapp开发的多端影视APP/对接的苹果CMS

     2022-09-03 750

    苹果10CMS影视APP对接,Uniapp开发的多端影视APP,本APP有缓存,投屏,播放记录,收藏等功能是非常完善的。会员中心也是用的苹果cms的数据。可以打包到多端的代码。

    Uniapp+SpringBoot即时通讯聊天安卓APP源码

    Uniapp+SpringBoot即时通讯聊天安卓APP源码

     2022-08-14 498

    uniapp+SpringBoot即时通讯聊天软件源码,前端使用uniapp,后端使用SpringBoot。手机端使用uniapp实现,目前仅支持安卓端和iOS端,小程序端和H5端暂未做适配。

    最新更新火鸟v5.5地方门户系统源码带圈子动态/完整数据地方门户系统源码下载

    最新更新火鸟v5.5地方门户系统源码带圈子动态/完整数据地方门户系统源码下载

     2020-12-04 788

    最新更新火鸟v5.5地方门户系统源码带圈子动态,亲测完整数据地方门户系统行业整站源码下载。火鸟地方门户系统源码(带圈子),这个是火鸟地方门户官网平台的一个系统源码,最新5.5版本,整合了PC端,移动端,公众号端平台,将圈子内容也包含了进来,

    百度百科小程序源码/基于uniapp开发的zblog多端小程序开源源码

    百度百科小程序源码/基于uniapp开发的zblog多端小程序开源源码

     2023-03-24 259

    基于uniapp开发的zblog多端小程序开源源码,百度百科小程序源码下载。前期准备工作1、必须是已BA域名、zblog程序、并且伪静态。2、zblog安装猫贝大佬的插件 https://app.zblogcn.com/?id=2

    Uniapp+thinkphp社区朋友圈源码

    Uniapp+thinkphp社区朋友圈源码

     2022-05-01 451

    基于uniapp+thinkphp社区朋友圈源码,基于thinkphp5.1+uniapp+mysql5.7 开发的社区程序,主要兼容H5版本,图片压缩使用的七牛云存储。后端程序采用MVC的设计模式,前端基于uniapp并使用uview-U

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

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

     2021-11-10 788

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