xml
<view class="segmentedControl">
<!-- 循环遍历 -->
<block wx:for="{{radioValues}}">
<text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
</block>
</view>
css
/*LXSegmentedControl容器*/
.segmentedControl {
/*水平居中*/
margin: 30px auto;
/*边框为2px 主色调为蓝*/
border: 2px solid #39f;
/*圆角6px*/
border-radius: 6px;
/*控件宽度*/
width: 240px;
/*控件高度*/
height: 30px;
}
/*普通文本*/
.segmentedControl text {
/*水平排列*/
float: left;
/*宽度为控件宽度的1/3 再减去2px的右边框*/
width: 78px;
/*字体大小*/
font-size: 14px;
/*主色调*/
color: #39f;
/*行高,与控件高度相等*/
line-height: 30px;
/*文本水平居中*/
text-align: center;
/*右边距*/
border-right: 2px solid #39f;
}
/*选中状态文本*/
.segmentedControl text.selected {
/*同主色调*/
/*前景色为白色*/
color: white;
}
/*最后一个分组按钮*/
.segmentedControl text.last {
/*不必右边框*/
border-right: 0;
/*高度也不必减少2px,就是控件高度的1/3*/
width: 80px;
}
js
Page({
data: {
radioValues: [
{'value': '男','selected': false},
{'value': '女','selected': true},
{'value': '保密','selected': false},
],
clazz: []
},
indexChanged: function(e){
// 点中的是组中第个元素
var index = e.target.dataset.index;
// 读取原始的数组
var radioValues = this.data.radioValues;
for (var i = 0; i < radioValues.length; i++){
// 全部改为非选中
radioValues[i].selected = false;
// 当前那个改为选中
radioValues[index].selected = true;
}
// 写回数据
this.setData({
radioValues: radioValues
});
// clazz状态
this.clazzStatus();
},
onLoad: function(){
// onLoad 比 onReady 更早调用,后者为选中时屏幕闪动一下
this.clazzStatus();
},
clazzStatus: function(){
/* 此方法分别被加载时调用,点击某段时调用 */
// class样式表如"selected last","selected"
var clazz = [];
// 参照数据源
var radioValues = this.data.radioValues;
for (var i = 0; i < radioValues.length; i++){
// 默认为空串,即普通按钮
var cls = '';
// 高亮,追回selected
if (radioValues[i].selected) {
cls += 'selected ';
}
// 最后个元素, 追加last
if (i == radioValues.length - 1) {
cls += 'last ';
}
//去掉尾部空格
cls = cls.replace(/(\s*$)/g,'');
clazz[i] = cls;
}
// 写回数据
this.setData({
clazz: clazz
});
}
})
/*普通文本*/
.segmentedControl text {
/*水平排列*/
float: left;
/*宽度为控件宽度的1/3 再减去2px的右边框*/
width: 78px;
/*字体大小*/
font-size: 14px;
/*主色调*/
color: #39f;
/*行高,与控件高度相等*/
line-height: 30px;
/*文本水平居中*/
text-align: center;
/*右边距*/
border-right: 2px solid #39f;
}
/*选中状态文本*/
.segmentedControl text.selected {
/*同主色调*/
/*前景色为白色*/
color: white;
}
/*最后一个分组按钮*/
.segmentedControl text.last {
/*不必右边框*/
border-right: 0;
/*高度也不必减少2px,就是控件高度的1/3*/
width: 80px;
}
- 函数响应式编程及ReactiveObjC学习笔记 (四)
今天我们继续看其他的类别 UIImagePickerController+RACSignalSupport.h #import <UIKit/UIKit.h> @class RACDele ...
- ios 点餐系统
这个程序的主要界面就是一个TabBarController.总共三个标签,第一个是所有的可点的菜,第二个是已点的菜,第三个是可以留言或者查看所有留言. 下面是第一个页面: 右上角的i按钮是添加新菜,每 ...
- ios之UIToolBar
toolbar除了可以和navigationController一起用之外,也可以独立用到view里.工具栏UIToolbar – 一般显示在底部,用于提供一组选项,让用户执行一些功能,而并非用于在完 ...
- 第三方MBXPageViewController的使用和注意事项
GitHub的地址: https://github.com/Moblox/MBXPageViewController 介绍SegmentController的使用: - (void)createSeg ...
随机推荐
- 学习笔记:SASS
SASS: http://www.sass.hk/sass-course.html SASS 2015-10-10 http://sass.bootcss.com/docs/sass-referen ...
- Python cx_Oracle 安装小记
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,Python cx_Oracle 安装小记 SQLAlchemy 是 Pytho ...
- java Integer类以及拆箱和装箱
package com.ilaw.boson.controller; public class Demo { public static void main(String[] args) { Inte ...
- Mysql 日期加减
mysql表中有一些字段是显示日期的.因为各种需要,需要将它时间往后调整1年. mysql 日期增加一年的更新语句更新的语句如下: UPDATE table SET date = DATE_A ...
- ReactiveX 学习笔记(22)使用 RxJS + Angular 进行 GUI 编程
课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...
- tensorflow读取本地MNIST数据集
tensorflow读取本地MNIST数据集 数据放入文件夹(不要解压gz): >>> import tensorflow as tf >>> from tenso ...
- 如何在 ajax 外拿到 ajax 的数据???和ajax的参数
第一步: var 变量名 = $.ajax({ url: "发送请求的地址", dataType: 'json', type: 'post', async: false }) 第 ...
- oracle 连接字符串的问题
未指定的错误,发生了一个 Oracle 错误,但无法从 Oracle 中检索错误信息.数据类型不被支持. 原因是你用的ADO for ORACLE的驱动是微软的Microsoft OLE DB ...
- JSP中JavaScript校验用户名等重复
$(function () { $("#unitFrom").validate({ errorClass:"errorInfo", //默认为错误的样式类为:e ...
- Vimtutor中文版
================================================================================ 欢 迎 阅 ...