小程序中radio-group组件实现类似到UISegmentControl风格

最新推荐文章于 2024-08-01 21:41:04 发布

极乐叔

最新推荐文章于 2024-08-01 21:41:04 发布

阅读量1.1k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/rolan1993/article/details/81202631

版权

本文介绍如何在微信小程序中利用radio-group组件，模仿iOS的UISegmentControl效果。通过修改index.wxml和index.js文件，设置样式并监听change事件来实现选中状态的切换。虽然存在需要手动判断checked效果的不足，但足以满足需求。作者黄秀杰分享了详细的步骤和代码示例，供开发者参考。

摘要由CSDN通过智能技术生成

|文档地址

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){
*   c