wx小程序weapp(radio、checkbox、cell)使用入门

文章参考

weapp radio学习

1. 将i-radio-group和i-radio组件注册到全局中

{
	"pages": [ 
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/XXXX/visitingAppointmentIndex",
			"style": {
				"navigationBarTitleText": "XXXXX"
			}
		}
	],
	// 定义全局设置
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": { //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件
			"i-radio-group": "/wxcomponents/iview_weapp/radio-group/index",
			"i-radio": "/wxcomponents/iview_weapp/radio/index",
			"i-button": "/wxcomponents/iview_weapp/button/index",
		}
	}
}

2. i-radio-group和i-radio需要组合使用

<view class="his-name">
	<i-radio-group :current="confirmUser" @change='selectVistor'>
		<view class="his-item" v-for="(item, index) in hisUserList" :key="item.userId">
			<view class="his-name">
				<i-radio position="left" :value="item.employName" :data-index='userId' :data-obj='item' />
			</view>
		</view>
	</i-radio-group>
	<view class="userinfo-btn-item">
		<i-button @click="confirmVisitedEmpoloyee" data-nextstep="visitedUser" type="ghost" shape="circle">确定</i-button>
	</view>
</view>

3. i-radio-group定义change事件

export default {
	data() {
		return {
			// 选中的值
			confirmUser: '王五',
			hisUserList: [{
				"employName": "王五",
				"employPhone": "13786487322",
				"userId": "ADKLAJLFJKLAKJ"
			}]
		};
	},
	methods:{
		// 选中历史访问人员
		selectVistor: function(eventObj) {
			this.confirmUser = eventObj.detail.value;
		},
		// 根据关键字从 对象数组中 获取 对象
		getObjFromArrayByKey: function (originArray, keyName, keyValue) {
			var length = originArray.length;
			var result = null;
			for (var i = 0; i < length; i++) {
				var currentObj = originArray[i];
				if (currentObj[keyName] === keyValue) {
					result = currentObj;
					// 添加在原始数组中的位置 属性
					result.indexNum = i;
					break;
				}
			}
			return result;
		},
		// 确定被拜访的人员
		confirmVisitedEmpoloyee: function () {
			var confirmUser = this.getObjFromArrayByKey(this.hisUserList, 'employName', this.confirmUser);
			console.log(confirmUser);
			this.$emit('confirm', confirmUser);
		},
	}
}

weapp checkbox学习

1. 将i-checkbox-group和i-checkbox组件注册到全局中

{
	"pages": [ 
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/XXXX/visitingAppointmentIndex",
			"style": {
				"navigationBarTitleText": "XXXXX"
			}
		}
	],
	// 定义全局设置
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": { //这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件
			"i-checkbox": "/wxcomponents/iview_weapp/checkbox/index",
			"i-checkbox-group": "/wxcomponents/iview_weapp/checkbox-group/index",
			"i-button": "/wxcomponents/iview_weapp/button/index",
		}
	}
}

2. i-checkbox-group 和 i-checkbox 组合使用

<i-checkbox-group :current="confirmUsers" @change='selectVistor'>
	<view class="his-item" v-for="(item, index) in hisUserList" :key="item.idCard">
		<view class="his-name">
			<i-checkbox position="left" :value="item.visitorName" :checked="item.isSelected" :data-index='index' :data-obj='item' />
		</view>
	</view>
</i-checkbox-group>

3. i-checkbox-group定义change事件，获取用户选中的值

export default {
	data() {
		return {
			confirmUsers: [],
			hisUserList: [
				// {
				//       "visitorFaceImg": "9jKFHKJSDHFLJHFKHDKJSD",
				//       "visitorName": "李四",
				//       "visitorPhone": "13786487323",
				//       "company": "hikvision",
				//       "idCard": "430481199807178989",
				//       "licensePlateNumber": "湘A7086H",
				//       "id":"1JAFKJA-AJKFL-jaKDFJ",
						// "isSelected": false
				// }
			],
			// 选中的员工
			selectedVisitor: null
		};
	},
	methods: {
		// 确定被拜访的人员
		confirmVisitor: function () {
			var result = [];
			for (var i = 0; i < this.hisUserList.length; i++) {
				var currentObj = this.hisUserList[i];
				if (currentObj.isSelected) {
					result.push(currentObj)
				}
			}
			console.log(result);
			this.$emit('confirm', result);
		},
		// 选中历史访问人员
		selectVistor: function(eventObj) {
			let detail = eventObj.detail;
			let selectUserObj = hikTools.getObjFromArrayByKey(this.hisUserList, 'visitorName', detail.value);
			var index = selectUserObj.indexNum;
			this.hisUserList[index].isSelected = detail.current;
		}
	}
}

在数据中定义 isSelected: boolean 来判断是否选中

weapp i-cell 必填提示

slot=‘icon’ 表示要在标题前面添加的内容，这里可以设置内容样式，

<i-cell title="拜访类型" @change="visitTypePickerChange">
	<text slot='icon' style="color: #F45151;">
		*
	</text>
	<view class="" slot="footer">
		<picker :value="visitTypeIndex" @change="visitTypePickerChange" :range="visitTypeArr" range-key="visitType">
			<view class="picker">
				{{visitTypeArr[visitTypeIndex]['visitType']}}
			</view>
		</picker>
	</view>
</i-cell>