小程序动态绑定样式

简介: 小程序动态绑定样式

现在要在微信小程序中实现点击控件修改样式,如下

image.png

第一步:在wxss中定义被点击和未被点击的样式,如下

.is_checked{
  border: 1px solid #FE0002 ;  color: #FE0002 ;  background: #fff;}
.service_selection .normal{
  border: none;
  color: #333;  background: #F0F1EC;}

第二步:在js文件中的data中设置一个flag,叫他isChecked,默认isChecked==false。如下:

data: {
    isChecked: false  }

第三步:在wxml文件中绑定点击事件,

<view bindtap="serviceSelection"></view>


在js文件中实现这个方法,并另他点击后设置isChecked==true。如下:

  serviceSelection(){
      this.setData({
        isChecked:true
      })
  }

第四步:依然是在wxml文件中进行数据绑定:

 <view class="{{isChecked?'is_checked':'normal'}}"bindtap="serviceSelection"></view>

重点是这一句代码

{{isChecked?'is_checked':'normal'}}"

这是一个三目运算符,当isChecked==true时,在class加上is_checked的样式,为flase时使用normal的样式。这一点的实现类似php控制样式类名的语法。

目录
相关文章
|
6月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
6月前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
JSON 小程序 Android开发
小程序列表左滑效果在IOS呈上下滑动影响样式
小程序列表左滑效果在IOS呈上下滑动影响样式
125 0
|
JavaScript 小程序
小程序JS动态修改样式vv
小程序JS动态修改样式
236 0
|
6月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
209 0
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
64 0
微信小程序:自定义关注公众号组件样式
|
3月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
104 0
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
4月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
155 0
|
JSON 小程序 前端开发
五分钟上手Vant,快速搭建小程序界面样式
五分钟上手Vant,快速搭建小程序界面样式
153 0