小程序checkbox,radio组件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了小程序checkbox,radio组件,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1672字,纯文字阅读大概需要3分钟。
内容图文
小程序的checkbox,radio
1.checkbox是复选框
而checkbox-group是用来同容纳多个checkbox的容器,checkbox-group里面有一个用来绑定bindchange的,当选项发生改变时触发。
效果图:
WXML文件代码:
<!-- checkbox多选按钮 -->
<text>选择付款方式</text>
<checkbox-group bindchange="checkboxChange">
<label wx:for="{{checkbox}}">
<checkbox checked="{{item.check}}" value="{{item.value}}">{{item.admin}}</checkbox>
</label>
</checkbox-group>
<text>{{checkboxText}}</text>
<view class="bot-botton">
<button size="mini" type="primary" bindtap="detail">付款</button>
</view>
图片:
JS文件代码:
checkbox:[
{admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'}
],
checkboxText:''
},
checkboxChange:function(e){
var text = e.detail.value;
this.setData({checkboxText:'已选的付款方式:'+text});
},
图片:
2.radio组件
每次只能选一个选项,一样radio-group也是用来同容纳多个radio的容器,radio-group里面有一个用来绑定bindchange的,当选项发生改变时触发。
效果图:
WXML文件代码:
<!-- radio组件 -->
<text>选择付款方式</text>
<radio-group bindchange="radioChange">
<label wx:for="{{radio}}">
<radio checked="{{item.radio}}" value="{{item.value}}">{{item.admin}}</radio>
</label>
</radio-group>
<text>{{radioText}}</text>
<view class="bot-botton">
<button size="mini" type="primary" bindtap="detail">付款</button>
</view>
图片:
JS文件代码:
radio:[
{admin:'会员卡余额(可用 元)',value:'会员卡余额(可用 元)',check:'true'},{admin:'微信支付',value:'微信支付'}
],
radioText:''
},
radioChange:function(e){
var text = e.detail.value;
this.setData({radioText:'已选的付款方式:'+text});
},
澄欢?
发布了4 篇原创文章 · 获赞 0 · 访问量 232
私信
关注
内容总结
以上是互联网集市为您收集整理的小程序checkbox,radio组件全部内容,希望文章能够帮你解决小程序checkbox,radio组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。