小程序自定义实现多选单选功能

实现多选功能

 <view
         bindtap="checkPortHandler"
         class="item {{item.ischeck?'g-bg-color white-color':''}}"
         data-index="{{index}}"
         data-item="{{item}}"
         wx:for="{{checkPortList}}"
         wx:key="index">{{item.name}}         
   </view>

//定义在data里的值
checkPortList: [
			{ id: 1, name: '第一装货港', ischeck: false },
			{ id: 2, name: '第二装货港', ischeck: false },
			{ id: 3, name: '第三装货港', ischeck: false }
		],
//点击实现多选
checkPortHandler(e) {
		console.log(e)
		let index = e.currentTarget.dataset.index
		let item = this.data.checkPortList[index]
		item.ischeck = !item.ischeck
		this.setData({
			checkPortList: this.data.checkPortList
		})		
	},

实现单选功能

 <view
     bindtap="checkPortHandler"
     class="item {{item.id===currentPort?'g-bg-color white-color':''}}"
     data-index="{{index}}"
     data-item="{{item}}"
     wx:for="{{checkPortList}}"
     wx:key="index">{{item.name}}                
  </view>

//现在data中定义
currentPort: '1'
//点击实现单选功能
	checkPortHandler(e) {
		this.setData({
			currentPort: e.currentTarget.dataset.item.id
		})
	},