上一章节讲述了小程序weui的input表单输入使用方法，包括单选框，复选框等，都在一个页面上展现，本章节单独拿出来讲述一下小程序weui radio单选按钮的使用方法。
一、在input目录中新建radio.wxml，并添加如下代码
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">radio</view>
<view class="page__desc">weui单选按钮效果</view>
</view>
<view class="page__bd">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>
<view class="weui-cells__title">单选列表项</view>
<view class="weui-cells weui-cells_after-title">
<radio-group bindchange="radioChange">
<label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
<radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
<view class="weui-cell__bd">{{item.name}}</view>
<view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
<icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
</view>
</label>
</radio-group>
<view class="weui-cell weui-cell_link">
<view class="weui-cell__bd">添加更多</view>
</view>
</view>
</view>
</view><!--V型知识库原创 www.vxzsk.com-->二、在根目录app.json配置文件中配置radio文件路径
"pages/input/radio",
如上述代码，配置在第一行，这样小程序weui radio单选按钮的页面效果就会默认为首页
三、打开radio.js文件，添加初始化单选按钮名称、点击效果等代码
在data对象中添加
/**
* 页面的初始数据
*/
data: {
radioItems: [
{ name: '单选0', value: '0' },
{ name: '单选1', value: '1', checked: true },
{ name: '单选2', value: '2' }
],
},点击单选按钮的实现方法
radioChange: function (e) {
console.log('radio发生change事件，携带value值为：', e.detail.value);
var radioItems = this.data.radioItems;
for (var i = 0, len = radioItems.length; i < len; ++i) {
radioItems[i].checked = radioItems[i].value == e.detail.value;
}
this.setData({
radioItems: radioItems
});
}四、预览效果
查看日志，js函数radioChange可以获取到点击时单选按钮的值，由此可以判断到底点击的是哪一个单选按钮
此文章本站原创，地址 https://www.vxzsk.com/1885.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程