Vue2.x开发goods页面（点击侧边导航滑动到当前位置）

截图展示:

goods页面

首先获取到goods页面的数据 使用axios获取数据（npm install axios --save-dev）
在goods组件中使用axios 获取数据

import axios from 'axios'

created(){
        axios.get('static/data.json').then((res) =>{
            this.goods=res.data.goods
        })
    } 

获取数据之后 安装better-scroll依赖

在使用better-scroll插件生效的前提条件：父元素要有定位属性以及overflow:hidden;滚动的区域高度大于父元素的高度

npm install better-scroll --save
在goods组件中使用 引入import BScroll from 'better-scroll'

在methods初始化 然后在到created函数中调用初始化的scroll的方法

methods：{
_inintScroll(){
            this.scroll = new BScroll(this.$refs.menuGoods,{
                click:true
            })
            this.scroll = new BScroll(this.$refs.menuFoods,{
                click:true,
                probeType:3  //scroll滚动时  能实时的告诉我们位置 监测
            })
            //监听事件   scroll滚动时  实时的暴露位置
            this.scroll.on('scroll',(pos) =>{
                this.scrollY=Math.abs(Math.round(pos.y))
            })
        }
}

在created()中写入

this.$nextTick(() =>{
                this._inintScroll() 
            })

接下来实现点击侧边导航滑动到当前的foods
给goods的li绑定点击事件：

@click="menuGoodClick(index)   记得要传入当前的索引值index

在methods中实现点击效果

menuGoodClick(index){
            //console.log(index)
            //计算出对应的foods的li的数量
            let foodList = this.$refs.menuFoods.getElementsByClassName('goods-name')
            //console.log(foodList)
            //点击滚动到当前的li，
            this.scroll.scrollToElement(foodList[index],250)
        },

但是计算出来对的foods的li的数量还是不能实现点击导航滑动对应的foods的li
前提条件忘了计算出foods的li的高度 还是在methods中定义一个方法计算foods的li的个数

//计算每一个foods的li的高度
        calHeight(){
            let foodList = this.$refs.menuFoods.getElementsByClassName('goods-name')
            console.log(foodList)
            let height =0;
            this.goodsList.push(height)
            for(let i=0;i<foodList.length;i++){
                let item = foodList[i]
                height +=item.clientHeight
                this.goodsList.push(height)
            }
            console.log(this.goodsList)
        },

然后在created中调用

 this.$nextTick(() =>{
                this._inintScroll()
                this.calHeight()
            })

点击侧边导航实现了foods滑动到对应的li上

还有一个点击当前的侧边导航应该高亮显示

可以给li绑定一个class 事件

<li v-for="(item,index) in goods" :key="index"
            :class="{'crrent':crrentIndex===index}" @click="menuGoodClick(index)">

在stylus样式里面写入高亮显示的样式代码（根据需求写这部分简单就不给代码了）
显示的前提条件是当前的foods的li的index值等于侧边导航的li的index值
在computed中计算出foods的li的index值

 computed:{
        //计算点击当前的foods的li的对应的index值
        crrentIndex(){
            for(let i=0;i<this.goodsList.length;i++){
                //定义两个变量考虑当height2没有的情况下i=0；
                let height1 = this.goodsList[i]
                let height2 = this.goodsList[i+1]
                if(!height2 || (this.scrollY>= height1&& this.scrollY<height2)){
                    return i
                }
            }
            return 0
        }
    },

功能完成！！！