详解微信小程序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 相关文章推荐
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
微信小程序实现登录注册功能
Dec 29 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
fgetcvs在linux的问题
2012/01/15 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
简单了解python元组tuple相关原理
2019/12/02 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
领导的自我鉴定
2013/12/28 职场文书
网络技术专业求职信
2014/07/13 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技