vue类似外卖菜单滑动左侧小测单实时更新的效果

本实现引用了better-scroll这一移动端库

import BScroll from 'better-scroll'

菜单中使用动态绑定class

<li :key="index" class="menu-item " v-for="(foods,index) in goods" :class="{current:index===currentIndex}">

首先需要确定一些data数据

data () {
   
    return {
   
        scrollY:0,    //右侧滑动的y轴坐标(滑动过程实时变化)
        tops:[],      //所有右侧分类的li的top组成的数组(列表第一次显示后就不再变化 )
    }
}

这里创建页面滑动效果,在生命周期回调函数中执行,保证数据异步更新完成后才会进行页面的监听绑定,避免出现过早的绑定导致无法使用

mounted () {
   
    this