因为公司后端用其他框架，所以都是用cdn引用js写在一个页面了，现在只能达到点击左侧栏目、右侧到对应的栏目位置，但是右侧滑动的时候，左边栏目不跟随切换active

是右边li的索引值没有传到左边去吗？但是左边可以获取右边的索引了，点击也可以联动

html代码

<div class="content">

    <!--左边-->
    <div class="menu-wrapper" ref="menuWrapper">
        <ul>
            <li v-for="(food,index) in foods" @click="menuClick(index,$event)" :class="{'active': activeIndex == index}">
                {{food.class}}
                <i class="num"></i>
            </li>
        </ul>
    </div>

    <!--右边-->
    <div class="foods-wrapper" id="wrapper" ref="foodsWrapper">
        <ul>
            <li v-for="(food,index) in foods" :key="food.id" class="food-list-hook">
                <div class="class-title">
                    {{food.class}}
                </div>
                <div v-for="food in food.list">
                    <div class="item">
                        <div class="itemleft" @click="menuShow(food)">
                            <div class="item-img">
                                <img :src="food.imgs" alt="">
                            </div>
                        </div>
                        <div class="itemright">
                            <div class="title">
                                {{food.name}}
                            </div>
                            <div class="price">
                                <i class="fa fa-cny"></i>
                                <span>
                                    {{food.price}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>

js代码

new Vue({
    el: '#app',
    data() {
        return {
            foods: [],
            listHeight: [],
            foodsScrollY: 0
        }
    },

    created() {
        axios.get('data.json').then(response = >{
            this.foods = response.data.foods;
            this.$nextTick(() = >{
                this._initScroll(); // 初始化scroll
                this._calculateHeight(); // 初始化列表高度列表
            })
        });
    },
    computed: {
        activeIndex() {
            for (let i = 0; i < this.listHeight.length; i++) {
                let topHeight = this.listHeight[i] let bottomHeight = this.listHeight[i + 1]
                if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
                    return i
                }
            }
            return 0
        }
    },
    methods: {
        _initScroll() {
            this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
                click: true
            });
            this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                probeType: 3
            });
            // 监控滚动事件
            this.foodsScroll.on('scroll', (pos) = >{
                this.foodsScrollY = Math.abs(Math.round(pos.y))
            })

        },
        _calculateHeight() {
            let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
            let height = 0 this.listHeight.push(height) for (let i = 0; i < foodList.length; i++) {
                let item = foodList[i] height += item.clientHeight this.listHeight.push(height)
            }
        },
        menuClick(index, event) {
            if (!event._constructed) {
                return
            }
            this.foodsScroll.scrollTo(0, -this.listHeight[index], 300)
        }
    }

});

手机web左右滑动的导航

qq_14890789

1个回复