小程序教程

微信小程序RadioGroup代替方案

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

RadioGroup代替方案，类似iOS中UISegmentedControl

布局1.样式表

外圈是一个圆角的矩形

内部是第N段取值，其中最后一段为空，声明class为last

选中为底色+白字，普通状态则反之，声明class为selected

  1. /*LXSegmentedControl容器*/
  2. .segmentedControl {
  3.     /*水平居中*/
  4.     margin: 30px auto;
  5.     /*边框为2px 主色调为蓝*/
  6.     border: 2px solid #39f;
  7.     /*圆角6px*/
  8.     border-radius: 6px;
  9.     /*控件宽度*/
  10.     width: 240px;
  11.     /*控件高度*/
  12.     height: 30px;
  13. }

  15. /*普通文本*/
  16. .segmentedControl text {
  17.     /*水平排列*/
  18.     float: left;
  19.     /*宽度为控件宽度的1/3 再减去2px的右边框*/
  20.     width: 78px;
  21.     /*字体大小*/
  22.     font-size: 14px;
  23.     /*主色调*/
  24.     color: #39f;
  25.     /*行高，与控件高度相等*/
  26.     line-height: 30px;
  27.     /*文本水平居中*/
  28.     text-align: center;
  29.     /*右边距*/
  30.     border-right: 2px solid #39f;
  31. }

  33. /*选中状态文本*/
  34. .segmentedControl text.selected {
  35.     /*同主色调*/
  36.     background-color: #39f;
  37.     /*前景色为白色*/
  38.     color: white;
  39. }

  41. /*最后一个分组按钮*/
  42. .segmentedControl text.last {
  43.     /*不必右边框*/
  44.     border-right: 0;
  45.     /*高度也不必减少2px，就是控件高度的1/3*/
  46.     width: 80px;
  47. }
复制代码

2.写上静态的数据作为测试
  1. <view class="segmentedControl">
  2.     <text>男</text>
  3.     <text class="selected">女</text>
  4.     <text class="last">保密</text>
  5. </view>
复制代码

这里有一个坑：

  1. <text>男</text>
复制代码

不等同于

  1. <text>
  2.     男
  3. </text>
复制代码

后者会变成占据两行

3.改进为数组
  1. Page({
  2.     data: {
  3.         radioValues: [
  4.             {'value': '男','selected': false},
  5.             {'value': '女','selected': true},
  6.             {'value': '保密','selected': false},
  7.         ]
  8.     }
  9. })
复制代码

4.循环遍历与样式判断
  1. <view class="segmentedControl">
  2.     <!-- 循环遍历 -->
  3.     <block wx:for="{{radioValues}}">
  4.         <!-- 找出最后一段 -->
  5.         <text class="last" wx:if="{{index == radioValues.length - 1}}">{{item.value}}</text>
  6.         <!-- 判断是不是选中状态 -->
  7.         <text class="selected" wx:elif="{{item.selected}}">{{item.value}}</text>
  8.         <!-- 普通按钮 -->
  9.         <text wx:else>{{item.value}}</text>
  10.     </block>
  11. </view>
复制代码

注意：以上判断是错的，当最后一个高亮时却不出selected效果，于是后文再重写。

5.点击text处理高亮与否
  1.     indexChanged: function(e){
  2.         // 点中的是组中第个元素
  3.         var index = e.target.dataset.index;
  4.         // 读取原始的数组
  5.         var radioValues = this.data.radioValues;
  6.         for (var i = 0; i < radioValues.length; i++){
  7.             // 全部改为非选中
  8.             radioValues[i].selected = false;
  9.             // 当前那个改为选中
  10.             radioValues[index].selected = true;
  11.         }
  12.         // 写回数据
  13.         this.setData({
  14.             radioValues: radioValues
  15.         });
  16.         // clazz状态
  17.         this.clazzStatus();
  18.     },
复制代码

6.第4条判断样式表逻辑错误

索性改为提供数据源的方式来实现，wxml中就不做判断了，wx:if只能对<view>等标签上判断，实在不好用。

  1.     clazzStatus: function(){
  2.         /* 此方法分别被加载时调用，点击某段时调用 */
  3.         // class样式表如"selected last","selected"
  4.         var clazz = [];
  5.         // 参照数据源
  6.         var radioValues = this.data.radioValues;
  7.         for (var i = 0; i < radioValues.length; i++){
  8.             // 默认为空串，即普通按钮
  9.             var cls = '';
  10.             // 高亮，追回selected
  11.             if (radioValues[i].selected) {
  12.                 cls += 'selected ';
  13.             }
  14.             // 最后个元素, 追加last
  15.             if (i == radioValues.length - 1) {
  16.                 cls += 'last ';
  17.             }
  18.             //去掉尾部空格
  19.             cls = cls.replace(/(\s*$)/g,'');
  20.             clazz[i] = cls;
  21.         }
  22.         // 写回数据
  23.         this.setData({
  24.             clazz: clazz
  25.         });
  26.     }
复制代码

然后分别在onLoad与indexChanged调用它即可。

而布局文件也变得异常清晰，数据与视图分离了：

  1. <view class="segmentedControl">
  2.     <!-- 循环遍历 -->
  3.     <block wx:for="{{radioValues}}">
  4.         <text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
  5.     </block>
  6. </view>
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习