用uView实现多选组件列表

 

前端代码

<template>
	<view>
		<u-navbar :is-back="true" title="选择课程" title-color="#000000" :background="background"></u-navbar>
		<view class="content">
			<u-gap height="20" bg-color="#F2F2F2"></u-gap>
			<view class="address-window">
				<!-- 无地址 -->
				<view class="picture" v-if="courselist.length==0">
					<image :src="url+'images/emptybox.png'"></image>
				</view>
				<view class="list" v-else>
					<u-row gutter="10" v-for="(item,index) in courselist" :key="index" @click="tapCourse(index,item)" class="item acea-row row-between-wrapper">
						<u-col span="10">
							<view class="address u-padding-left-30">
								<view class="name" :class='active==index?"font-color":""'>{{item.name}}</view>
							</view>
						</u-col>
						<u-col span="2" text-align="center">
							<u-icon name="checkbox-mark" color="#fc4141" size="28" v-if="item.checked"></u-icon>
						</u-col>
					</u-row>
				</view>
				
				<view class="btn-wrapper">
					<u-button hover-class="other-button-hover" @click="updateUser" data-name="updateinfo" size="default" type="warning">选择课程</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

css代码：

<style>
	.content{padding-top:20rpx;}
	.btn-wrapper{margin:0 auto;width:50%;}
	
	.address-window.on {transform: translate3d(0, 0, 0);}
	
	.address-window .title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			height: 123rpx;
			line-height: 123rpx;
			position: relative;
	}
	
	.address-window .title .iconfont {
		position: absolute;right: 30rpx;color: #8a8a8a;font-size: 35rpx;
	}
	
	.address-window .list .item {
		margin-left: 30rpx;padding-right: 30rpx;border-bottom: 1px solid #eee;height: 129rpx;font-size: 25rpx;color: #333;
	}
	
	.address-window .list .item .iconfont {
		font-size: 37rpx;color: #2c2c2c;
	}
	
	.address-window .list .item .iconfont.icon-complete {
		font-size: 30rpx;color: #fff;
	}
	
	.address-window .list .item .address {
		width: 99%;
	}
	.address-window .list .item .address .name {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 4rpx;
	}
	.address-window .pictrue {
			width: 414rpx;height: 336rpx;margin: 0 auto;
	}
	
	.address-window .pictrue image {
		width: 100%;height: 100%;
	}
</style>

js代码：

tapCourse:function(index,item){
		let that = this;
		that.courselist[index]['checked'] = !item.checked;
		if(item.checked){
			that.courseid.push(item.itemid);
		}else{
			that.courseid.pop(item.itemid);
		}
},