微信小程序RadioGroup代替方案

#RadioGroup代替方案，相似iOS中UISegmentedControl

#佈局

##1.樣式表

外圈是一個圓角的矩形

內部是第N段取值，其中最後一段爲空，聲明class爲last

選中爲底色+白字，普通狀態則反之，聲明class爲selected

/*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 {
	/*同主色調*/
	background-color: #39f;
	/*前景色爲白色*/
	color: white;
}

/*最後一個分組按鈕*/
.segmentedControl text.last {
	/*沒必要右邊框*/
	border-right: 0;
	/*高度也沒必要減小2px，就是控件高度的1/3*/
	width: 80px;
}

##2.寫上靜態的數據做爲測試

<view class="segmentedControl">
	<text>男</text>
	<text class="selected">女</text>
	<text class="last">保密</text>
</view>

這裏有一個坑：

<text>男</text>

不等同於

<text>
	男
</text>

後者會變成佔據兩行

##3.改進爲數組

Page({
	data: {
		radioValues: [
			{'value': '男','selected': false},
			{'value': '女','selected': true},
			{'value': '保密','selected': false},
		]
	}
})

##4.循環遍歷與樣式判斷

<view class="segmentedControl">
	<!-- 循環遍歷 -->
	<block wx:for="{{radioValues}}">
		<!-- 找出最後一段 -->
		<text class="last" wx:if="{{index == radioValues.length - 1}}">{{item.value}}</text>
		<!-- 判斷是否是選中狀態 -->
		<text class="selected" wx:elif="{{item.selected}}">{{item.value}}</text>
		<!-- 普通按鈕 -->
		<text wx:else>{{item.value}}</text>
	</block>
</view>

注意：以上判斷是錯的，當最後一個高亮時卻不出selected效果，因而後文再重寫。

##5.點擊text處理高亮與否

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();
	},

##6.第4條判斷樣式表邏輯錯誤

索性改成提供數據源的方式來實現，wxml中就不作判斷了，wx:if只能對<view>等標籤上判斷，實在很差用。

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
		});
	}

而後分別在onLoad與indexChanged調用它便可。

而佈局文件也變得異常清晰，數據與視圖分離了：

<view class="segmentedControl">
	<!-- 循環遍歷 -->
	<block wx:for="{{radioValues}}">
		<text data-index="{{index}}" bindtap="indexChanged" class="{{clazz[index]}}">{{item.value}}</text>
	</block>
</view>

正文完

源碼下載：關注下方的公衆號->回覆數字1010

對小程序開發有趣的朋友關注公衆號: huangxiujie85，QQ羣: 581513218，微信: small_application，陸續還將推出更多做品。