uniapp中菜单双联动效果(左侧点击右侧自动滚动到对应位置,右侧滚动左侧高亮对应菜单)

<template>
	<view class="content">
		<view class="ld">
			<!-- :class="{active:index===change}" -->
			<view class="left">
				<view 
				v-for="(item,index) in kindlist" 
				:key="index" @click="setid(index)"
				:class="index===change?'active':''"
				>
					{{item.title}}
				</view>
			</view>
			<view class="right">
				<scroll-view 
				:scroll-y="true" 
				style="white-space: nowrap;height: 200px;" 
				:scroll-into-view="clickId"
				:scroll-with-animation="true"
				@scroll="scroll"
				@scrolltolower="scrolltolower "
				>
					<view v-for="(item,index) in kindlist" :key="index">
						<text class="title" :id="'po'+index">{{item.title}}</text>
						<view v-for="(item2,index2) in item.list" :key="index2">
							{{item2}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kindlist: [{
						title: "水果",
						list: ["苹果", "香蕉", "桔子", "芒果"]
					},
					{
						title: "家电",
						list: ["电视", "冰箱", "空调", "热水器"]
					},
					{
						title: "美食",
						list: ["牛排", "汉堡", "芝士", "意面"]
					},
					{
						title: "衣物",
						list: ["T 恤", "卫衣", "短裤", "帽子"]
					}
				],
				clickId: "",
				change:0,
				topList:[],
				isLeftClick:false
			}
		},
		onReady() {
			this.getNodesInfo();
		},
		methods: {
			setid(i) {
				this.clickId = "po" + i;
				this.change = i;
				this.isLeftClick=true;
			},
			scroll(e){
				if(this.isLeftClick){
					this.isLeftClick=false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				// 只能变前第三个,最后一个到不了底部,只能用滚动到底部事件
				for(let i=0;i<this.topList.length;i++){
					let h1 = this.topList[i];
					let h2 = this.topList[i+1];
					if(scrollTop>h1&&scrollTop<h2){
						this.change = i;
					}
				}
			},
			// 滚动到底部
			scrolltolower(){
				setTimeout(()=>{
					this.change = 3;
				},80)
			},
			getNodesInfo(){
				//小程序没有doucument和window对象(undefined)
				const query =uni.createSelectorQuery().in(this);
				query.selectAll(".title").boundingClientRect().exec(res=>{
					let nodes = res[0];
					let arr = [];
					nodes.map(item=>{
						arr.push(item.top);
					})
					this.topList = arr;
				})
			}
		}
	}
</script>

<style lang="scss">
	.ld {
		display: flex;
		border: 1px solid black;
		.left {
			width: 100px;
			text-align: center;
			border-right: 1px dashed #007AFF;
			
		}
		.right {
			flex: 1;
			padding-left: 10px;
		}
	}
	.title {
		font-size: 20px;
		font-weight: bold;
		background-color: pink;
	}
	.active{
		background-color: #00FFFF;
		color: #ffffff;
	}
</style>

效果如图:
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苟圣啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值