discounts-minapp/components/zs-choose-tab/index.vue

<template>
	<view class="">
		
	<view class="choose-tab">
		<view class="tab-list">
			<view class="tab" v-for="(item,index) in tabList" :key="index" @click="handleTab(item,index)">
				{{item.label}}
			</view>
		</view>
			 <view class="box" v-show="show">
				<view class="item " v-for="(item,index) in list" :key="index" @click="choose(item)">
					{{item.label}}
				 </view>
				
			 </view>
		
	</view>
		<view class="choose-modal" v-show="show" @click="show = false">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				list:[],
				tabList: [{
						id: 1,
						label: '区域',
						list: [

							{
								label: '观山湖'
							},
							{
								label: '白云区'
							},
							{
								label: '花果山区'
							}
						]
					},
					{
						id: 1,
						label: '全部分类',
						list: [{
								label: '甜点饮品'
							},
							{
								label: '特色美食'
							},
							{
								label: '风味小吃'
							}
						]
					},
					{
						id: 1,
						label: '智能排序',
						list: [

							{
								label: '距离优先'
							},
							{
								label: '销量优先'
							},
							{
								label: '低价优先'
							}
						]
					},
					{
						id: 1,
						label: '附近',
						list: [

							{
								label: '500m'
							},
							{
								label: '1KM'
							},
							{
								label: '2KM'
							}
						]
					},
				]
			}
		},
		methods: {
			handleTab(item) {
				this.list = item.list
				this.$nextTick(()=>{
					this.show = true
				})
			},
			choose(item){
				this.show = false
			},
		},
	}
</script>

<style lang="less" scoped>
	.choose-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		z-index: 99;
	}

	.choose-tab {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.tab-list{
			display: flex;
			align-items: center;
			padding: 22rpx;
			background: #fff;
			.tab {
				background: #F0F0F0;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #222222;
				font-size: 24rpx;
				padding: 0 20rpx;
				margin-right: 16rpx;
			}
		}
		
		.box{
			background: #fff;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding: 14rpx 0;
			.item{
				font-size: 24rpx;
				color: #222222;
				padding: 14rpx 24rpx;
			}
		}
	}
</style>