【uni-app 实现左侧点击右侧滚动，仿美团菜单滚动】

uni-app实现仿美团菜单，点击左侧菜单，右侧跳到与左侧相对应的位置（NO.1）

默认是推荐，如果点妙蛙种子，右侧就自动滑动到id相应的地方，如果滑动到妙蛙种子内容则左边菜单高亮（有点瑕疵）

点击评价的切换页面链接

1.template，将数据渲染到页面上

	<view>
		<view class="plan4 fle" v-if="p3_cur==0">
		<view class="plan5 fle1">
			<scroll-view scroll-y="true" class="fon_6 " :style="'height:'+ p5_hei+';'" >
				<view class="item fle_all" v-for="(item,index) in list_name" @tap="scroll_a" :class="index==lun5?'cur':''"
				 :data-current="index" :key="index" 
				 :data-id="index"  
				 :data-cid="item.id">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="plan6 fle4">
			<scroll-view scroll-y="true" class="fon_6 " :style="'height:'+ p5_hei+';'" :scroll-into-view="into_index"
					 scroll-with-animation @scroll="scro">
				<view class="item fle_all" v-for="(item,index) in list_name" 	 :class="index==lun5?'cur':''"  :data-current="index" 
				 :id="'text'+index"
				 :key="index" :data-id="index" :data-cid="item.id">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
	</view>
</view>

2.css

		.plan5{
			height: 500rpx;
		}
		.plan5 .item {
			height: 150rpx;
			border-bottom: 1rpx solid #007AFF;
		}
		.plan5 .cur{
			color: #007AFF;
		}
		.plan6{
			height: 500rpx;
		}
		.plan6 .item {
			height: 200rpx;
		}
		/deep/::-webkit-scrollbar {
	 		display: none;
	 		width: 0;
	 		height: 0;
	 		color: transparent;
	 		background: transparent;
		}

3.script

		<script>
	export default {
		data() {
			return {
				menu_name: [{
					name: '点菜'
				}, {
					name: '评价'
				}, {
					name: '商家'
				}],
				list_name: [{
					name: '推荐'
				}, {
					name: '折扣'
				}, {
					name: '秒啊'
				}, {
					name: '太香啦'
				}, {
					name: '妙蛙种子'
				}, {
					name: '蛋黄派'
				}, {
					name: '人人鱼'
				},{
					name: '今天'
				}, {
					name: '咱们就'
				}, {
					name: '吃顿'
				}, {
					name: '好的'
				}, {
					name: '花~'
				}],
				into_index:"a"，
				scro_hei: []
				
			}
		},
		methods: {
		//点菜这个导航的点击事件，外加初始化右边滚动块的距离
			lun_bo(e) {
				this.lun3 = e
				setTimeout(() => {
					if (this.lun3 == 1) {
						for (var i = 0; i < this.list_name.length + 1; i++) {
							wx.createSelectorQuery().select('#text' + i).boundingClientRect(e => {
								this.scro_num.push({top:e.top,bot:e.top+e.height})
							}).exec()
						}
					}
				}, 100)

			},
			//点击左边右边滚动到相应地方
			scroll_a(e){
				// console.log(e)
				this.lun5=e.currentTarget.dataset.id
				this.into_index="text"+e.currentTarget.dataset.id
				console.log(e,this.into_index)
			},
			//滚动右边判断左边是否高亮
			scro(e) {
				var dd = parseInt(e.detail.scrollTop) + 176
				for (var i = 0; i < this.list_name.length; i++) {
					if(dd > this.scro_num[i].top &&  dd < this.scro_num[i].bot){
						this.lun5 = i
						return
					}
				}

			},
			
		}
	}
</script>

看完点个赞吧