当前位置:首页 > 日记 > 正文

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

详解微信小程序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”选中样式。

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

相关文章

通过学习bootstrop导航条学会修改b

通过学习bootstrop导航条学会修改b

修改,导航条,基调,学习,颜色, 通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念- navbar-default:默认的外观- navbar-inverse:暗色背景的样式- 所以我们希望可以通过自定义一套完整的风格:比如自定义一个颜色基调 …

jQuery实现返回顶部按钮和scroll滚

jQuery实现返回顶部按钮和scroll滚

动画效果,返回顶部,按钮,功能,电脑软件,jQuery脚本:<script type="text/javascript"> $(function() { var scrollDiv = document.createElement('div'); $(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').ap…

常用正则表达式匹配代码介绍

常用正则表达式匹配代码介绍

正则表达式,常用,代码,电脑软件,正则表达式,又称正规表示法、常规表示法。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则。在很多文本编辑器…

JavaScript判断输入是否为数字类型

JavaScript判断输入是否为数字类型

类型,输入,数字,方法,电脑软件,JavaScript判断输入是否为数字类型的方法总结前言很多时候需要判断一个输入是否位数字,下面简单列举集中方法。第一种方法 isNaNisNaN  返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 NaN 即…

JS实现unicode和UTF-8之间的互相转

JS实现unicode和UTF-8之间的互相转

转换,电脑软件,JS,unicode,UTF,有一设备,为短信网关。需将PC送过来的UTF-8转换成UNICODE才能将内容通过短信发送出去,同样,接收到的短信为unicode编码,也许转换成UTF-8才能在PC端软件显示出来。程序很简单,只是走了不少弯路://unicode为1个接收…

vue.js利用Object.defineProperty

vue.js利用Object.defineProperty

双向绑定,电脑软件,js,vue,defineProperty,Object.defineProperty这个方法了不起啊,vue.js是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了。几行代码看他怎么用var a= {}Objec…

word2013解决中文双引号变成英文的

word2013解决中文双引号变成英文的

中文,双引号,两种,英文,技巧,  Word2013经常在输入中文双引号时,前半个双引号还是是中文格式的双引号,但在后半个双引号时就变成了英文格式的双引号,如下图所示很不协调。那么下面就由小编给大家分享下word2013中解决中文双引号变成英文双引…

服务器选购十大术语解释

服务器选购十大术语解释

术语,解释,服务器,十大,电脑软件,  我们将对服务器选购时最令选购者产生困惑的10个概念 加以解释,希望能够对购买者以后的购买活动提供参考。1.企业(Enterprise):指任何大中小型公司(或者非赢利组织以及政府机关)。一般地,我们更频繁的使用…

PPT与Excel交互VBA法是什么

PPT与Excel交互VBA法是什么

交互,电脑软件,PPT,Excel,VBA,  PowerPoint和Office其他格式文件交换数据最好的方法是通过VBA,因为这句话,很多朋友来信询问用VBA如何实现PPT与Excel连接。以下是小编为您带来的关于PPT与Excel交互之VBA法,希望对您有所帮助。PPT与Excel交互…

IIS不支持APK文件下载的解决办法

IIS不支持APK文件下载的解决办法

文件下载,不支持,解决办法,电脑软件,IIS,将安卓android客户端程序.apk文件上传到网站上后,发现竟然无法下载。.apk就是安卓应用的后缀名,一般通过手机直接输入apk的网址,就可以下载。但是默认情况下,使用IIS作为Web服务器的网站无法下载apk文件…

javascript  删除select中的所有op

javascript 删除select中的所有op

删除,实例,电脑软件,javascript,option,javascript 删除select中的所有option的实例方法一:function DeleteOptions() { var obj = document.getElementsByTagName("select")[0]; var selectOptions = obj.options; var op…

iscroll动态加载数据完美解决方法

iscroll动态加载数据完美解决方法

动态加载,解决方法,数据,完美,电脑软件,本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下<div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class=…

软件日记