jigesi/pages/category/index.vue

<template>
	<view class="">
		<navBar title="分类" :back="false" color="white" background="green" />

		<u-sticky bgColor="#fff">
			<u-tabs :list="list1"></u-tabs>
		</u-sticky>

		<view class="page-body" :style="'height:' + height + 'px'">
			<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop"
				scroll-with-animation>
				<view class="nav-left-item" @click="categoryClickMain(index)" :key="index"
					:class="index == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll"
				:style="'height:' + height + 'px'" scroll-with-animation>
				<view v-for="(foods, index) in classifyData" :key="index" class="box">
					<view style="margin-bottom:10upx;font-weight: 600;">{{foods.name}}</view>
					<view :id="i == 0 ? 'first' : ''" class="nav-right-item" v-for="(item, i) in foods.foods" :key="i"
						@click="cart(item.name)">
						<image src="https://img.tnblog.net/bigclassimg/1net.png" />
						<view class="right_item_name">{{ item.name }}</view>

						<!-- 		<view class="item_bottom">
							<view class="item_img">
								<image src="https://img.tnblog.net/bigclassimg/1net.png" />
							</view>
							<view class="item_des">
								<view class="right_item_name">{{ item.name }}</view>
								<image src="https://img.tnblog.net/bigclassimg/1net.png" />
							</view>
						</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import classifyData from '@/common/classify.data.js';
	export default {
		data() {
			return {
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],





				name: 'wkiwi',
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: classifyData,
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672,
					7017
				], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0 //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			};
		},
		created() {
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			this.getHeightList();
		},
		methods: {
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight = rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});
				selectorQuery
					.selectAll('.box')
					.boundingClientRect(function(rects) {
						let arr = [0];
						let top = 0;
						rects.forEach(function(rect) {
							// 					rect.id      // 节点的ID
							// 					rect.dataset // 节点的dataset
							// 					rect.left    // 节点的左边界坐标
							// 					rect.right   // 节点的右边界坐标
							// 					rect.top     // 节点的上边界坐标
							// 					rect.bottom  // 节点的下边界坐标
							// 					rect.width   // 节点的宽度
							// 					rect.height  // 节点的高度
							top += rect.height;
							arr.push(top);
						});
						console.log(arr);
						_this.arr = arr;
					})
					.exec();
			},
			scroll(e) {
				let _this = this;
				if (this.timeoutId) {
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function() {
					//节流
					_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length; i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i + 1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this
								.diff) / (classifyData.length - 1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10);
			},
			categoryClickMain(index) {
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[
					index]); //防止两次相等造成点击不触发滚动时间
			},
			cart: function(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				});
			}
		},
		components: {}
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>