junzitang/pages/classification/CateThree.vue

<template>
	<view class="clearfix" :class="['qn-page-' + theme]">
		<view class="float_left">
			<scroll-view
				scroll-with-animation
				scroll-y
				class="left-aside"
				:style="{ height: 'calc(100vh - 112rpx - ' + (isBang ? '84px' : '50px') + ')' }"
				:scroll-top="scrollTop"
				:scroll-into-view="itemId"
			>
				<view v-for="(item, index) in cate_list" :key="index" class="f-item b-b ellipsis" :class="{ active: index === current_index }" @click="tabtap(index, item)">
					<view v-if="index === current_index" class="active-line primary-bg"></view>
					{{ item.title }}
				</view>
			</scroll-view>
		</view>
		<view class="float_right">
			<scroll-view
				:scroll-top="scrollRightTop"
				@scroll="rightScroll"
				scroll-with-animation
				scroll-y
				class="right-aside"
				:style="{ height: 'calc(100vh - 112rpx - ' + (isBang ? '84px' : '50px') + ')' }"
			>
				<view v-for="(titem, tindex) in cate_list" :key="tindex" class="cate-ul" :id="'item' + tindex">
					<view class="cate-name">{{ titem.title }}</view>
					<view class="clearfix">
						<view class="cate-li" @click="goPage('/pagesT/productDetail/productDetail?id=' + titem.id + '&name=' + titem.title)">
							<view class="cate-img-view">
								<image v-if="titem.images" :src="titem.images" mode="aspectFill" class="cate-img"></image>
								<view class="ibonfont ibonleimupinleifenleileibie cate-img-icon" v-else></view>
							</view>
							<view class="cate-tit">{{ titem.title }}</view>
						</view>
						<view
							class="cate-li"
							v-for="(item, index) in titem.children"
							:key="index"
							@click="goPage('/pagesT/productDetail/productDetail?id=' + item.id + '&name=' + item.title)"
						>
							<view class="cate-img-view">
								<image v-if="item.images" :src="item.images" mode="aspectFill" class="cate-img"></image>
								<view class="ibonfont ibonleimupinleifenleileibie cate-img-icon" v-else></view>
							</view>

							<view class="cate-tit ellipsis">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cate_list: [],
			cate_Two_list: [],
			current_index: 0,
			scrollTop: 0, //tab标题的滚动条位置
			oldScrollTop: 0,
			itemId: '', // 栏目右边scroll-view用于滚动的id
			scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
			arr: [],
			timer: null, // 定时器
			menuHeight: 0, // 左边菜单的高度
			menuItemHeight: 0 // 左边菜单item的高度
		};
	},
	computed: {
		isBang() {
			return this.$_utils.modelmes();
		},
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	created() {
		this.getAllCategory();
	},
	methods: {
		// 分类列表 getAllCategory
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					userCenterId: this.userId || 0
				})
				.then(({ data }) => {
					this.cate_list = data;
				});
		},
		// 点击左边的栏目切换
		async tabtap(index,row) {
			if (this.arr.length == 0) {
				await this.getMenuItemTop();
			}
			if (index == this.current_index) return;
			this.scrollRightTop = this.oldScrollTop;
			this.$nextTick(function() {
				this.scrollRightTop = this.arr[index];
				this.current_index = index;
				this.leftMenuStatus(index);
			});
		},
		// 设置左边菜单的滚动状态
		async leftMenuStatus(index) {
			this.current = index;
			// 如果为0，意味着尚未初始化
			if (this.menuHeight == 0 || this.menuItemHeight == 0) {
				await this.getElRect('left-aside', 'menuHeight');
				await this.getElRect('cate-two-li', 'menuItemHeight');
			}
			// 将菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取右边菜单每个item到顶部的距离
		getMenuItemTop() {
			new Promise(resolve => {
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery
					.selectAll('.cate-ul')
					.boundingClientRect(rects => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.getMenuItemTop();
							}, 10);
							return;
						}
						rects.forEach(rect => {
							// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
							this.arr.push(rect.top - rects[0].top);
							resolve();
						});
					})
					.exec();
			});
		},
		// 右边菜单滚动
		async rightScroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			if (this.arr.length == 0) {
				await this.getMenuItemTop();
			}
			if (this.timer) return;
			if (!this.menuHeight) {
				await this.getElRect('left-aside', 'menuHeight');
			}
			setTimeout(() => {
				// 节流
				this.timer = null;
				// scrollHeight为右边菜单垂直中点位置
				let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
				for (let i = 0; i < this.arr.length; i++) {
					let height1 = this.arr[i];
					let height2 = this.arr[i + 1];
					// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
					if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
						this.leftMenuStatus(i);
						return;
					}
				}
			}, 10);
		},
		// 获取一个目标元素的高度
		getElRect(elClass, dataVal) {
			new Promise((resolve, reject) => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.' + elClass)
					.fields(
						{
							size: true
						},
						res => {
							// 如果节点尚未生成，res值为null，循环调用执行
							if (!res) {
								setTimeout(() => {
									this.getElRect(elClass);
								}, 10);
								return;
							}
							this[dataVal] = res.height;
							resolve();
						}
					)
					.exec();
			});
		}
	}
};
</script>

<style lang="scss">
.left-aside {
	width: 200upx;
	background-color: #f5f6f7;
	/* #ifdef H5||MP */
	height: calc(100vh - 130upx);
	/*#endif*/
	/* #ifdef APP-PLUS */
	height: 100vh;
	/*#endif*/
	.f-item {
		-webkit-line-clamp: 1;
		width: 100%;
		height: 80upx;
		line-height: 80rpx;
		padding-left: 48rpx;
		margin-bottom: 10rpx;
		font-size: 26upx;
		color: #4b4b4b;
		position: relative;

		&.active {
			color: #000000;
			font-size: 32upx;
			font-weight: bold;
			background-color: #ffffff;
			border-radius: 100rpx 0 0 100rpx;
		}
		.active-line {
			position: absolute;
			left: 28rpx;
			top: 50%;
			transform: translateY(-50%);
			height: 24upx;
			width: 4upx;
			border-radius: 4rpx;
		}
	}
}
.right-aside {
	/* #ifdef H5||MP */
	height: calc(100vh - 140upx);
	/*#endif*/
	/* #ifdef APP-PLUS */
	height: 100vh;
	/*#endif*/
	width: 550upx;
	.cate-name {
		padding-top: 20rpx;
		padding-left: 40rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #000000;
	}
	.cate-li {
		float: left;
		width: 130upx;
		margin-left: 40upx;
		text-align: center;
		margin-top: 20upx;
		.cate-img-view {
			width: 130rpx;
			height: 104rpx;
			background: #f5f7f7;
			border-radius: 8px;
			margin-bottom: 24rpx;
			.cate-img {
				width: 84upx;
				height: 84upx;
				border-radius: 8upx;
				display: block;
				margin: 0 auto;
				transform: translateY(10rpx);
			}
			.cate-img-icon {
				font-size: 80upx;
				width: 84upx;
				line-height: 84upx;
				color: #eeeeee;
				height: 84upx;
				border-radius: 8upx;
				margin: 0 auto;
				transform: translateY(10rpx);
			}
		}

		.cate-tit {
			font-size: 24upx;
			font-weight: 400;
			color: #3a3a3a;
			width: 100%;
			-webkit-line-clamp: 1;
		}
	}
}
</style>