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()