小程序中radio-group组件实现类似到UISegmentC

|文档地址

https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

创建一个空白项目

开始着手将index.wxml与index.js替换成文档中的代码

照搬文档中的代码并略作修改

<radio-groupclass="radio-group"bindchange="radioChange">
<labelclass="radio"wx:for="{{items}}">
<radiovalue="{{item.value}}"checked="{{item.checked}}"/>{{item.title}}  
</label>
</radio-group>

//index.js

*   Page({
*   data:{
*   items:[
*   {value:'USA', title:'美国'},
*   {value:'CHN', title:'中国',checked:'true'},
*   {value:'BRA', title:'巴西'},
*   {value:'ENG', title:'英国'},

*   },
*   radioChange:function(e){
*   console.log('radio发生change事件，携带value值为：', e.detail.value)
*   }
*   })

改动的地方在于key/value的命名，value作为真正的取值项，title作为显示项，更符合习惯一些。

开始重写样式
为radio-group加个背景色

*   .radio-group{
*   background-color:#F8F8F8;  
*   display: flex;
*   }

把radio本身隐藏

*   .radio-group radio {
*   display: none;
*   }

label均匀分布，文字居中

*   label {
*   text-align: center;  flex:1;
*   }

为当前选中项高亮颜色
在radio change事件中保存当前选中值

*   this.setData({
*   country: e.detail.value
*   });

在wxml文件中遍历判断是否为当前项来高亮

预览效果

下载地址：https://gitee.com/laeser/demo-weapp

一点小瑕疵
取值选中checked效果，不能简单地通过设定radio-group的value值来自动实现，，而是要遍历每一个标签来判断是否设定checked，这点是radio-group不够完善的地方，但也足够我们了。yu

专栏作家

黄秀杰，微信公众号：huangxiujie85。小程序社区博主。分享移动应用快速开发实战，坚持原创，包括图文与视频教程。

本文原创发布于小程序社区。未经许可，禁止转载
原文地址：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=38607