这是我第 6 篇简书.
要实现下图的效果(自定义多选单选), 大多数公司项目的多选框都是自己设计的, 所以用原生标签或者组件是不可行的, 最简单的是自己绑定事件, 然后切换选择和未选择的图片. 而小程序和 vue 一样是没法操作 dom 的, 所以要利用数组的下标和自定义属性来进行三元判断.
直接上代码:
一. 自定义多选
- wxml:
- <view class="sel-box">
- /** 用 wx:for 来进行列表渲染 **/
- <view wx:for="{{repContent}}" class="multi-selection">
- <text>{{item.message}}</text>
- /** 利用数组的下标 index 来进行判断是哪个的事件 **/
- <image src="{{selectIndex[index].sureid? hasSelect : noSelect}}" class="multi-img" data-selectIndex="{{index}}" bindtap="selectRep" />
- </view>
- </view>
- js:
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- noSelect: 'https://xxxxx/ic_report_nor@2x.png',
- hasSelect: 'https://xxxxx/ic_check_ele@2x.png',
- repContent: [{ message: '广告内容' }, { message: '不友善内容' }, { message: '垃圾内容' }, { message: '违法违规内容' }, { message: '其他' }],
- selectIndex: [
- { sureid: false },
- { sureid: false },
- { sureid: false },
- { sureid: false },
- { sureid: false },
- ],
- },
- /**
- * 生命周期函数 -- 监听页面加载
- */
- onLoad: function (options) {
- },
- selectRep:function(e){
- let index = e.currentTarget.dataset.selectindex; // 当前点击元素的自定义数据, 这个很关键
- let selectIndex = this.data.selectIndex; // 取到 data 里的 selectIndex
- selectIndex[index].sureid = !selectIndex[index].sureid; // 点击就赋相反的值
- this.setData({
- selectIndex: selectIndex // 将已改变属性的 json 数组更新
- })
- }
- })
二. 自定义单选
实际上是组件 id, 自定义 id 配合数组下标 index 的应用:
- wsml:
- <view class="sel-box">
- <view wx:for="{{repContent}}" class="multi-selection">
- <text>{{item.message}}</text>
- <image src="{{index == id? hasSelect : noSelect}}" data-id="{{index}}" class="multi-img" bindtap="selectRep" />
- </view>
- </view>
- js:
- selectRep:function(e){
- var ids = e.currentTarget.dataset.id; // 获取自定义的 id
- this.setData({
- id: ids // 把获取的自定义 id 赋给当前组件的 id(即获取当前组件)
- })
- },
currentTarget: 事件绑定的当前组件.
dataset: 在组件中可以定义数据, 这些数据将会通过事件传递给 SERVICE. 书写方式: 以 data - 开头, 多个单词由连字符 - 链接, 不能有大写 (大写会自动转成小写) 如 data-element-type, 最终在 event.currentTarget.dataset 中会将连字符转成驼峰 elementType.
id: 当前组件的 id
来源: http://www.jianshu.com/p/9a270b097c87