列表demo

你说个灯儿

于 2022-02-16 17:13:32 发布

阅读量179

点赞数

分类专栏： demo 文章标签： css css3 html

本文链接：https://blog.csdn.net/yong_jin/article/details/122967223

版权

demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述
列表样式demo

<view class="staff_box" v-else>
	<view class="team_box" v-for=" (list,n) in staffList">
		<view >
			<view class="team_title" @click="list.checkClass = !list.checkClass">
				<text>{{list.class}}</text>
				<image :src="list.open?require('../../../static/live-camera/down.png'):require('../../../static/live-camera/up.png') " mode=""></image>
			</view>
			<view class="team_list" v-if="list.arr">
				<view class="item" v-for="(item,n) in list.arr " @click="checkBtn(item)">
					<view class="circle" v-if="checkeIndex !== item.id"></view>
						<image src="../../../static/live-camera/success.png" mode="" v-else></image>
						<view class="name">{{item.name}}</view>
						</view>
					</view>
				</view>
				<!-- 如果还有嵌套，把整个team_box 组件加到这里-->
			</view>
		</view>
</view>

<script>
data(){
	return{
		staffList:[
			{
				class:'1组'，
				open:false,
				arr:[
					{
						name:'王琳',
						check:false,
						id:999,
					}
				]
			},
			{
				class:'2组'，
				open:false,
				arr:[
					{
						name:'王可',
						check:false,
						id:999,
					}
				]
			},
			{
				class:'3组'，
				open:false,
				arr:[
					{
						name:'刘琳',
						check:false,
						id:999,
					}
				]
			}
		]，
		checkeIndex:null,
	}
},

methods:{
	checkBtn(obj){
		if(this.checkeIndex == obj.id){
			this.checkeIndex = null
		}
	}
}
</script>

<style lang="scss">
  .assistance {
	box-sizing: border-box;
	height: calc(100vh - 138px) !important;
	.assistance_staff {
		margin-top: 16rpx;
		background: #fff;
		.staff_box {
			max-height: 100%;
			overflow-y: auto;
			.team_box{
				.team_title{
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					border-bottom: 1rpx solid #D8D8D8;
					text{
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						line-height: 42rpx;
					}
					image{
						width: 44rpx;
						height: 38rpx;
					}
				}
				
				.team_list{
					.item{
						height: 124rpx;
						display: flex;
						align-items: center;
						padding: 0 30rpx;
						border-bottom: 1rpx solid #D8D8D8;
						.circle{
							width: 32rpx;
							height: 32rpx;
							border: 2rpx solid #DCDEE0;
							border-radius: 50%;
						}
						image{
							width: 36rpx;
							height: 36rpx;
						}
						.name{
							margin-left: 25rpx;
						}
					}
				}
			}
		}
	}
  }
</style>