uni-app realizes mall category page

<template>
	<view>
		<view class="search">
			<view class="searchBox">
				<navigator url="#">
					<image src="../../static/search.png" mode=""></image>
					搜索全部
				</navigator>
			</view>
		</view>
		<view class="cart">
			<view class="cartLeft">
				<scroll-view class="cartNameLeft" scroll-y="true" :scroll-top="scrollTop">
					<view class="cartNameItem" :class="{cateActive:index == current}" v-for="(item,index) in cate" :key='index' @click="menuTab(index)"> 
						{
    
    {
    
    item.catename}}
						<view class="cateLine"></view>
					</view>
				</scroll-view>
			</view>
			<view class="cartRight">
				<scroll-view class="cartRightScroll" scroll-y="true" :scroll-into-view = "'cate'+mainCurrent" scroll-with-animation="true" @scroll="rightScorll">
					<view class="cateTtem" v-for="(item,index) in cate" :key="index" :id="'cate'+index">
						<view class="cartRightTitle">
							——<text>{
    
    {
    
    item.catename}}</text>——
						</view>
						<view class="catrRightList">
							<view class="catrRightItem" v-for="(child,index) in item.product" :key="index">
								<image :src="imgUrl+child.mainimage" mode=""></image>
								<text>{
    
    {
    
    child.smalltitle}}</text>
							</view>
							<view class="clearFix"></view>
						</view>
					</view>
				</scroll-view>	
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				cate:[],
				current:0,
				rectInfo:[],
				mainCurrent:0,
				scrollTop:0
			}
		},
		onLoad() {
    
    
			this.getData()
		},
		mounted() {
    
    
			setTimeout(()=>{
    
    
				this.getRectInfo()
			},200)
			
		},
		methods: {
    
    
			getData() {
    
    
				uni.request({
    
    
				    url: '/api/index/cate',
				    success: (res) => {
    
    
						this.cate = res.data.data;
				        console.log(res.data.data);
				    }
				});
			},
			// 菜单选择
			menuTab(index) {
    
    
				this.current = index
				this.mainCurrent = index
				this.scrollTop = index*uni.upx2px(100)
				console.log(uni.upx2px(100));
			},
			// 获取元素的top bottom值 
			getRectInfo() {
    
    
				var top = 0;
				var bottom = 0;
				var temp = 0;
				for(var i =0; i < this.cate.length; i++) {
    
    
					// 通过id获取元素位置元素
					let view = uni.createSelectorQuery().in(this).select("#cate"+i);
					
					view.fields({
    
    
					  // 返回节点尺寸（width height）
					  size: true,
					  // 返回节点的 scrollLeft scrollTop
					  scrollOffset: true
					}, data => {
    
    
						console.log(data);
						top = temp;
						bottom = temp + data.height;
						temp += data.height;
						this.rectInfo[i] = {
    
    'top': top,'bottom' : bottom}
					}).exec();
				}
			},
			//添加滚动事件
			rightScorll(e) {
    
    
				var scrollTop = e.detail.scrollTop;
				for(var i = 0; i < this.rectInfo.length; i++) {
    
    
					if( scrollTop > this.rectInfo[i].top && scrollTop < this.rectInfo[i].bottom) {
    
    
						this.current = i
						this.scrollTop = i*uni.upx2px(100)
						console.log(this.scrollTop);
					}
				}
			}
		}
	}
</script>

<style>
	page {
    
    
		background: #f7f7f7;
	}
	
	.search {
    
    
		height: 110rpx;
		width: 100%;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.searchBox {
    
    
		width: 690rpx;
		height: 70rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #999;
		background: #f7f7f7;
		
	}
	.searchBox image {
    
    
		width: 38rpx;
		height: 38rpx;
		margin-right: 12rpx;
	}
	.searchBox navigator {
    
    
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
	}
	.cart {
    
    
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		background: red;
		display: flex;
	}
	.cartLeft {
    
    
		width: 200rpx;
		background: #f7f7f7;
		height: 100%;
	}
	.cartNameLeft {
    
    
		height: 100%;
	}
	.cartNameItem {
    
    
		font-size: 28rpx;
		color: #000;
		line-height: 100rpx;
		text-align: center;
		position: relative;
	}
	.cateActive {
    
    
		background: #fff;
	}
	.cateLine {
    
    
		position: absolute;
		width: 4px;
		height: 30rpx;
		background: #f7f7f7;
		top: 35rpx;
	}
	.cateActive .cateLine {
    
    
		background: #ba15b8f9;
	}
	.cartRight {
    
    
		width: 550rpx;
		background: #fff;
	}
	.cartRightScroll {
    
    
		height: 100%;
		padding-bottom: 20rpx;
	}
	.cartRightTitle {
    
    
		line-height: 86rpx;
		padding-top: 16rpx;
		color: #999;
		font-size: 28rpx;
		text-align: center;
	}
	.cartRightTitle text{
    
    
		padding: 0 30rpx;
	}
	.catrRightItem {
    
    
		width: 33.33%;
		float: left;
		margin-top: 20rpx;
	}
	.catrRightItem image {
    
    
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}
	.catrRightItem text {
    
    
		line-height: 36rpx;
		font-size: 24rpx;
		text-align: center;
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.clearFix {
    
    
		clear: both;
	}
</style>