uniapp 菜单联动
实现左侧点击定位右侧商品类别/右侧滚动左侧类别定位
HTML
<template>
<view class="content">
// 左侧菜单栏
<view class="left">
<view v-for="(item,index) in list" :key="index" @click="setClickId(index)" :class="{active:index===currentIndex}">{{item.title}}</view>
</view>
// 右侧商品栏
<viewclass="right">
<scroll-view scroll-y :scroll-into-view="clickId" scroll-with-animation @scroll="scroll" @scrolltolower="lower">
<view v-for="(item1,index1) in list" :key="index1">
<view class="goodsTitle" :id="'cur'+index1">{{item1.title}}</view>
<view v-for="(item2,index2) in item1.list" :key="index2"> {{item2}} </view>
</view>
</scroll-view>
</view>
</view>
</template>
js
<script>
export default {
data() {
return {
list: [{
title: "快餐",
list: ["盖饭", "臭豆腐", "凉皮", "肉夹馍"]
},
{
title: "西餐",
list: ["牛排", "红酒", "汉堡", "鸡排"]
},
{
title: "法餐",
list: ["蜗牛", "沙拉", "鹅肝", "红酒"]
},
{
title: "中餐",
list: ["炸鸡", "烤鸭", "木桶饭", "饺子"]
},
{
title: "西餐",
list: ["牛排", "红酒", "汉堡", "鸡排"]
},
{
title: "法餐",
list: ["蜗牛", "沙拉", "鹅肝", "红酒"]
},
{
title: "中餐",
list: ["炸鸡", "烤鸭", "木桶饭", "饺子"]
},
{
title: "西餐",
list: ["牛排", "红酒", "汉堡", "鸡排"]
},
{
title: "法餐",
list: ["蜗牛", "沙拉", "鹅肝", "红酒"]
},
{
title: "中餐",
list: ["炸鸡", "烤鸭", "木桶饭", "饺子"]
},
],
clickId: "", // 点击左侧菜单右侧菜单滑动
currentIndex: 0, // 点击左侧添加样式
topList: [],
}
},
onReady() {
this.getNodesInfo();
},
methods: {
setClickId(index) {
this.clickId = "cur" + index;
this.currentIndex = index;
},
scroll(e) {
// console.log(e);
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.currentIndex = i;
}
}
},
// 滚动到底部
lower(){
setTimeout(()=>{
this.currentIndex = this.topList.length;
console.log(this.list.length-1)
},100)
},
// 获取节点的scrollTop数组
getNodesInfo() {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.goodsTitle').boundingClientRect().exec(data => {
// console.log(data);
let res = data[0];
let rel = [];
res.map(item=>{
rel.push(item.top);
});
this.topList = rel;
console.log(this.topList);
});
}
}
}
</script>
css
<style lang="scss">
.content {
display: flex;
.left {
width: 100px;
border: 1px solid #f00;
}
.right {
flex: 1;
border: 1px solid #f00;
scroll-view {
height: 200px;
.goodsTitle {
font-size: 16px;
font-weight: 600;
background: #ffb6c1;
}
}
}
}
.active {
background: #ffb6c1;
}
</style>
左侧通过锚点定位去进行定位右侧商品类别 右侧则通过节点高度给予左侧下标赋值
注意：若为动态数据 无法获取节点信息 tolist为空 则设置延时器等待数据获取后再执行getNodesInfo()
