uniapp动态修改样式_uniapp样式动态绑定

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

已上线

未开始

//选择状态

selectState(e){

this.whichSelected=e.currentTarget.dataset.state

}

.state-btn-content{

//write your style

.state-btn-selected{ ... }

.state-btn-noselect{ ... }

}

注：需要注意的就是一个标签里尽量不要同时用静态class与动态class，可能会造成兼容问题。最好只是用一种方式的，如上代码里为了实现动态改变样式只使用了:class

错误示范：已上线

场景二：给标签渲染多种颜色(如图)

.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 动态修改导航栏之前使用this.$mp.page page提示未定义
uniapp 动态修改导航栏 // 使用条件编译防止H5报错// #ifdef APP-PLUSlet pages = getCurrentPages();let page = pages[page ...
动态修改el-input样式；动态修改elmentUI元素样式；css变量
场景:正常我们动态修改div元素的样式,使用:style和:class即可:但是我们想要动态修改element的组件样式时候,例如el-input字体颜色,由于el-input的样式嵌套很深,我们需要 ...
uni-app 动态修改导航名称
一级页面 methods: {//在点击list跳转的时候携带id传参到listSecond页面toLs(index,name) {**this.getIndex = index**uni.navig ...
uniapp动态修改样式_掌握Photoshop图层样式技术
凹凸贴图效果 "等等,什么?" 您会惊叹:""图层样式"菜单中没有凹凸贴图效果!" 的确如此,但是通过将"图案覆盖"和& ...
js 修改动态修改class css样式
//添加类名变量let danmakuWrapper = `.danmaku-wrapper{color:${this.danmakuData.color};font-size:${this.danm ...
uni-app动态修改导航条的标题
由于这个微信小程序表单页面是用于创建和编辑的,所以导航条的标题不能是一样的,但是在路由配置里面只能设置一个.所以需要在页面中进行修改,在这里用到了uni-app给我们的uni.setNavigatio ...
微信小程序wxss---对应css样式（动态修改css样式）
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式下图是微信中动态绑定css样式,实现css样式的动态修改
根据条件动态修改element 组件深层次样式
开发前提: vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会 ...
javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...

uniapp动态修改样式_uniapp样式动态绑定

uniapp动态修改样式_uniapp样式动态绑定相关推荐

最新文章

热门文章