跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll,用来计算左侧菜单栏对应右侧栏的食物相应显示的食物区,如果不用插件就比较费事了,因此这里分享一下这个插件的简单使用:
<强>一、项目中下载,并引入
在配置文件package.json中引入版本
“依赖”:{
:“better-scroll ^ 0.1.7”
}
之前
然后进入项目目录,打开cmd更新配置
npm我(我是安装缩写)
之前
最后引入,比如我在项目商品组件中使用则:
从“better-scroll”进口BScroll; 之前
<强>二,举个栗子
需求是处于当前比如热销榜栏目,则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。
下面是食物组件中的代码
模板:
& lt; template>
& lt; div类="商品"比;
& lt; div类=" menu-wrap " ref=癿enuWrap”比;//菜单栏
& lt; ul>
& lt;李v=盎跷?物品、索引)”类=安说ハ畹摹?class="{“当前”:currentIndex===指数}“@click=皊electMenu(指数、美元事件)”在
& lt;跨类=拔谋綽order-1px”比;
& lt;跨越v-show=癷tem.type> 0”class=巴急辍?class=" classMap item.type”祝辞& lt;/span> {{item.name}}
& lt;/span>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=" foods-wrap " ref=癴oodsWrap”比;//食物栏
& lt;/div>
& lt;/div>
& lt;/template>
脚本
& lt;脚本类型=拔谋?ecmascript-6”比;
从“进口Vue Vue ';
从“进口BScroll better-scroll ';
从“@购物车/模块/组件/导入购物车购物车”;
出口默认{
道具:{//接收父组件传的数据
卖方:{
对象类型:
}
},
数据(){
返回{
商品:[],
listHeight:[],//菜单中一个菜单栏目的高度
scrollY: 0//定义的Y滚动轴及初始值
};
},
计算:{//计算属性
currentIndex(){//当前菜单栏在整个菜单中的下标指数
(让我=0;我& lt;this.listHeight.length;我+ +){//遍历菜单中每个栏目的高度
让height1=this.listHeight[我];//第i个栏目的高度
这让height2=istHeight (i + 1);//第i + 1个栏目的高度
如果(!height2 | |(这一点。scrollY祝辞=height1,,这一点。scrollY & lt;height2)){//根据当前滚动轴的位置得出指数(如果第二个栏目不存在即第一个栏目是最后一个)或者(当前栏目高度大于等于第一个并且当前滚动轴小于第二个栏目高度)
返回我;//如果满足则返回指数
}
}
返回0;//初始值0
}
},
创建(){
Vue.prototype。http.get美元(“/api/货物”)
不要犹豫(res=比;{
这一点。商品=res.data.data;
美元。nextTick(()=比;{//this._initScroll ();
this._calculateHeight ();
});
});
这一点。classMap=[“减少”,“折扣”,“特殊”,“发票”、“保证”);
},
方法:{
selectMenu(指数、事件){
如果(! event._constructed) {
返回;
}
让foodList=Ｃ涝猺efs.foodsWrap.getElementsByClassName (“food-list-hook”);
让el=foodList(指数);
this.foodsScroll。scrollToElement(埃尔,300年);
},
_initScroll () {
这一点。menuScroll=new BScroll参(这个。。menuWrap, {
点击:真
});
这一点。foodsScroll=new BScroll参(这个。。foodsWrap, {probeType: 3
});
this.foodsScroll。(“滚动”,(pos)=比;{
这一点。scrollY=Math.abs (Math.round (pos.y));
console.log (this.scrollY);
});
},
_calculateHeight () {
让foodList=Ｃ涝猺efs.foodsWrap.getElementsByClassName (“food-list-hook”);
让身高=0;
this.listHeight.push(高度);
(让我=0;我& lt;foodList.length;我+ +){
让项目=foodList[我];
+=item.clientHeight高度;
this.listHeight.push(高度);
}
}
}
};
& lt;/script>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
