详解微信小程序Radio选中样式切换


Posted in Javascript onJuly 06, 2017

详解微信小程序Radio选中样式切换

本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下:

详解微信小程序Radio选中样式切换

原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个“active”的样式。

代码如下:

<!--index.wxml--> 
<view class="container"> 
 <radio-group bindchange="radioCheckedChange"> 
  <view class="flex_box"> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==0?'active':''}}">人气 
     <radio value="0"  hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==1?'active':''}}"> 销量 
     <radio value="1" hidden="true"></radio> 
    </label> 
   </view> 
   <view class="flex_item"> 
    <label class="{{radioCheckVal==2?'active':''}}"> 价格↑ 
     <radio value="2" hidden="true"></radio> 
    </label> 
   </view> 
  </view> 
 </radio-group> 
</view>

index.wxml代码中可以看到,首先隐藏radio的原始样式,利用lable点击来触发radioCheckedChange事件监听函数。

/**index.wxss**/ 
radio-group{ 
 width: 100%; 
} 
.flex_box{ 
 display: flex; 
 width: 100%; 
 background: #eee; 
} 
.flex_item{ 
 flex: 1; 
 text-align: center; 
} 
.flex_item label{ 
 padding: 10px 0; 
 display: inline-block; 
 width: 50%; 
} 
.flex_item label.active{ 
 color: red; 
 border-bottom: 2px solid red; 
  
}

index.wxss中,使用flex布局让它们平分,并定义“active”样式。

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  radioCheckVal:0 
 }, 
 radioCheckedChange:function(e){ 
  this.setData({ 
   radioCheckVal:e.detail.value 
  }) 
 } 
})

index.js中,定义一个接收radio选中值的变量radioCheckVal,当监听事件被触发时,记录下被选中的radio value。

最重要的一点是这一句:

<label class="{{radioCheckVal==0?'active':''}}">人气 
    <radio value="0"  hidden="true"></radio> 
   </label>

利用简单的判断表达式,取data中被选中的radio,判断当==当前radio value值时,为lable添加上“active”选中样式。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
js实现聊天对话框
Feb 08 Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
详解vue渲染从后台获取的json数据
Jul 06 #Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 #Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 #Javascript
vue-cli如何添加less 以及sass
Jul 06 #Javascript
微信小程序 跳转传递数据的实例
Jul 06 #Javascript
详解webpack进阶之插件篇
Jul 06 #Javascript
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
php实现文件下载更能介绍
2012/11/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python网络编程示例(客户端与服务端)
2014/04/24 Python
python单例模式实例分析
2015/04/08 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
python如何实现数据的线性拟合
2019/07/19 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python实现canny边缘检测
2020/09/14 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python学习之time模块的基本使用
2021/01/17 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
毕业生自我鉴定
2013/11/05 职场文书
应届生保险求职信
2013/11/11 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2015年服务员工作总结
2015/04/08 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL