school_uni/components/tab-bar/postList.vue

<template>
	<!-- 鱼塘 -->
	<view class="page1">
		<view class="tab-mask" v-if="showMoreTab == true"></view>
		<view class="title">
			<view class="title-sreach" :style="{'margin-top': menuButtonInfo.top +'px'}">
				<uni-icons type="search"></uni-icons>
				<input type="text" placeholder="搜索"
					style="flex:1;line-height: 33px;height: 33px;width: 70%;padding: 0 10px;" />
				<view class="sreach-btn">
					搜索
				</view>
			</view>
		</view>
		<view class="nav-tab">
			<view class="tab-box">
				<view @tap="checkTab(index)" class="tab1" v-for="(item,index) in tabList" :key="index">
					<view class="" style=""
						:style="{'font-size':tabIndex == index?'14px':'12px','font-weight':tabIndex == index?'700':'400'}">
						{{item.name}}
					</view>
					<view class="black-line" v-if="tabIndex == index"></view>
				</view>
				<view class="down-tab" @tap="showMoreTab = true">
					<uni-icons type="down"></uni-icons>
				</view>
			</view>
			<view class="up-tab" v-if="showMoreTab == true">
				<view>
					<view
						style="height: 25px;line-height: 25px;width: 100%;padding-left: 12px;font-size: 14px;font-weight: 700;">
						更多分类
						<text style="font-size: 12px;color: rgba(0, 35, 28, 0.5);">
							点击进入分类
						</text>
					</view>
					<view class="down-tab" @tap="showMoreTab = false">
						<uni-icons type="down"></uni-icons>
					</view>
				</view>
				<view class="tanchu-tab">
					<view class="tanchu1" v-for="(item,index) in tabList" :key="index"
						:style="{'background':tabIndex == index?'rgba(0, 35, 28, 1)':'#fff','color':tabIndex == index?'rgba(166, 255, 234, 1)':''}">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="shop-list">
			<view class="shop1" v-for="(item,index) in shopList" :key="index">
				<img :src="item.img" alt="" />
				<view class="shop-name">
					{{item.shopName | sliceMsg}}
				</view>
			</view>
		</view>
		<view class="huodong">
			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt="" style="margin-right: 5px;" />
			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt="" style="margin-left: 5px;" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
					shopName: '高徒课堂',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}, {
					shopName: '赵一鸣',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}, {
					shopName: '蜜雪冰城',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}, {
					shopName: '怂柠',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}, {
					shopName: '麻辣烫酸辣粉',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}, {
					shopName: '鲸鱼AI教育',
					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
				}],
				showMoreTab: false,
				tabIndex: 0,
				tabList: [{
					name: '兼职',
					index: 0
				}, {
					name: '广告',
					index: 1
				}, {
					name: '活动',
					index: 2
				}, {
					name: '美妆个护',
					index: 3
				}, {
					name: '考学职称',
					index: 4
				}, {
					name: '技能服务',
					index: 5
				}, {
					name: '省钱神券',
					index: 6
				}, {
					name: '推荐',
					index: 7
				}, {
					name: '摄影',
					index: 8
				}, {
					name: '吃饭',
					index: 8
				}, {
					name: '电影',
					index: 8
				}, {
					name: '唱歌',
					index: 8
				}, {
					name: '美妆个护',
					index: 8
				}, {
					name: '考学职称',
					index: 8
				}, {
					name: '技能服务',
					index: 8
				}, {
					name: '二手旧物',
					index: 8
				}],
				menuButtonInfo: {}
			}
		},
		filters:{
			sliceMsg(val) {
				return val.slice(0, 4);
			}
		},
		props: {

		},
		watch: {

		},
		onReachBottom() {
			if (this.searchForm.pageNumber >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNumber++;
			this.getShopList();

		},
		methods: {
			init() {
				console.log("配送初始化")
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.$forceUpdate()
			},
			checkTab(index) {
				this.tabIndex = index
			},
			getShopList() {

			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
		width: 100%;
		height: 100px;
		background-size: 100%;
	}

	.title-sreach {
		width: 70%;
		display: flex;
		height: 66rpx;
		line-height: 66rpx;
		display: flex;
		background: #fff;
		border-radius: 66rpx;
		padding-left: 10px;
		margin-left: 10px;
	}

	.sreach-btn {
		width: 50px;
		height: 25px;
		line-height: 25px;
		background: rgba(0, 35, 28, 1);
		color: rgba(166, 255, 234, 1);
		border-radius: 30px;
		text-align: center;
		margin: 4px;
	}

	.tab-box {
		display: flex;
		height: 30px;
		line-height: 20px;
		padding-left: 12px;
		width: 100%;
		overflow: scroll;
		white-space: nowrap;
		position: relative;
	}

	.tab1 {
		margin-right: 18px;
	}

	.nav-tab {
		position: relative;
	}

	.black-line {
		width: 25px;
		height: 3px;
		background: #000;
		border-radius: 3px;
		margin: 0 auto;
	}

	.down-tab {
		position: absolute;
		top: 0;
		right: 0;
		background: #fff;
		width: 55px;
		height: 20px;
		text-align: right;
		line-height: 20px;
		padding-right: 7px;
		background: linear-gradient(to right, transparent 0%, #ffffff 60%, #ffffff 100%);
	}

	.up-tab {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		z-index: 99;
		background: #F5F8F5;
	}

	.tab-mask {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		top: 100px;
		left: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 97;
	}

	.tanchu-tab {
		display: flex;
		flex-wrap: wrap;
	}

	.tanchu1 {
		width: 80px;
		height: 30px;
		background: #fff;
		border-radius: 10px;
		text-align: center;
		margin: 10px 0 0 10px;
		line-height: 30px;
		font-size: 13px;
	}

	.shop-list {
		    display: flex;
		    white-space: nowrap;
		    width: 100%;
			    padding: 0 12px;
		    overflow: scroll;
			    margin-top: 15px;
	}

	.shop1 {
		height: 70px;
		width: 50px;
		text-align: center;
		margin-right: 18px;
		img {
			width: 50px;
			height: 50px;
			border-radius: 50px;
		}
	}

	.shop-name {
		height: 20px;
		line-height: 20px;
		font-weight: 600;
	}
	.huodong{
		padding: 0 12px;
		display: flex;
		height: 85px;
		margin-top: 12px;
		img{
			height: 85px;
			flex: 1;
		}
	}
</style>