介绍 & lt; template>
& lt;才能div>
,,,& lt; div 类=癵oods"比;
,,,,,& lt; div 类=癿enu-wrapper", ref=癿enuWrapper"比;
,,,,,& lt;/div>
,,,,,& lt; div 类=癴ood-wrapper", ref=癴oodWrapper"比;
,,,,,& lt;/div>
,,,& lt;/div>
& lt;才能/div>
& lt;/template> & lt; script 类型=拔谋?ecmascript-6"比;
import BScroll 才能得到“better-scroll";
export 才能;default {
,,,的数据(){
return {才能
currentIndex才能:1、
货物才能:[]
,,},
},
,创建(){
this.classMap才能=[& # 39;减少# 39;& # 39;折扣# 39;,& # 39;特殊# 39;,& # 39;发票# 39;,& # 39;保证# 39;];
美元。才能http.get (& # 39;/api/商品# 39;),然后((响应)=祝辞{
反应才能=response.body;
if 才能;(response.errno===ERR_OK), {
,,this.goods=response.data;
,,}
,,,,,,,//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
这才能。nextTick美元(()=祝辞{
,,this._initScroll ();
,,});
,,});
},
,方法:{
_initScroll才能(){
,,,,,,,//,使用better-scroll实现的关键代码
this.menuScroll才能=new BScroll(这一点。refs.menuWrapper美元,{点击:真});
this.foodScroll才能=new BScroll(这一点。refs.foodWrapper美元,{点击:真});
,,}
,}
,,};
& lt;/script> ,计算:{//用才能来计算左侧当前索引在哪,从而定位到左侧边栏的位置
currentIndex才能(){
for 才能;(let 小姐:=,0;,小姐:& lt;, this.listHeight.length;,我+ +),{
,,var height1=this.listHeight[我],;
,,var height2=this.listHeight (i + 1);
,,如果(! height2 | | (this.scrollY 祝辞=,height1 ,,, this.scrollY & lt;, height2)) {
,,return 我;
,,}
,,}
return 才能;0;
,,}
},
,方法:{
_initScroll才能(){//,才能使用better-scroll实现的关键代码
this.menuScroll才能=new BScroll(这一点。refs.menuWrapper美元,{点击:真});
this.foodScroll才能=new BScroll (refs.foodWrapper美元,{
,,,点击:没错,
,,,,,,,,,//探针作用,实时监测滚动位置
,,,,,,,,,probeType: 3
,,});
this.foodScroll.on才能(& # 39;滚动# 39;,(pos)=祝辞{
,,this.scrollY=Math.abs (Math.round (pos.y))
,,});
,,},
_calculateHeight才能(){
let 才能;foodList=Ｃ涝猺efs.foodWrapper.getElementsByClassName (& # 39; food-list-hook& # 39;);
let 才能;身高=0;
this.listHeight.push才能(高度);
for 才能;(var 小姐:=,0;,小姐:& lt;, foodList.length;,我+ +),{
,,let 项=foodList[我];
,,身高+=item.clientHeight;
,,this.listHeight.push(高度);
,,}
,,}
,}//dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
,,,,,,,,这个。nextTick美元(()=祝辞{
,,,,,,,,,,this._initScroll ();
,,,,,,,,,,this._calculateHeight ();
,,,,,,,,}); /左边的菜单项的点击事件
selectMenu(指数、事件){//自己默认派发事件时(BScroll) _constructed默认为真的。但原生的浏览器并没有这个属性
,if (! event._constructed), {
,才能回报;
,}
,//运用BScroll滚动到相应位置
,//运用指数去找到对应的右侧位置
美元,let foodList=efs.foodWrapper.getElementsByClassName (& # 39; food-list-hook& # 39;);
,//滚动到相应的位置
,let el=foodList(指数);
,//设置滚动时间
,this.foodScroll.scrollToElement(埃尔,2000年);
}
这篇文章主要介绍vue.js2.0如何实现better-scroll的滚动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>什么是better-scroll
better-scroll是一个移动端滚动的解决方案,它是基于iscroll的重写,它和iscroll的主要区别在这里.better-scroll也很强大,不仅可以做普通的滚动列表,还可以做轮播图,选择器等等。
1.0版与本不同的是,我们使用的是裁判
很简单这样页面就可以滚动了,如下图
但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里
从而定义左侧边栏的位置
在dom渲染后,也是需要计算高度的。
滑动右边,实现左边联动已经实现了,接下来就是,点击左边的菜单,右边的食物相应滚动到具体的位置
给左边菜单绑定一个事件<代码>:@click=皊electMenu(指数、事件美元)“
