怎么在vue2.0中使用better-scroll实现一个移动端滑动 - 行业资讯

　　介绍

怎么在vue2.0中使用better-scroll实现一个移动端滑动?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

<强>滑动右边使左边联动的大概的思路:

1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中。

2)实现左边联动,则必须要监控“滚动”事件,获取其高度

3)将滚动的高度与右侧分栏的高度进行比较,获得其索引值

4)左侧的分类中,使与指数相应的分栏高亮即可~

余留的问题:额,左侧怎么跟着一起滚动?应该还需要判断一下当前左侧栏中的滚动的位置,然后使之跟随变化,但是不同尺寸的手机,高度不一,怎么解决? ? ?我不知道……

<强>点击左边时,右边实现自动定位的大概思路:

1)首先要使点击有效,因为better-scroll将默认事件都阻止了

2)为左侧的分栏绑定点击事件,并获取指数,然后使右边的相应指数分类滚动就行了~所以容易....但! ! !

怎么下手? ! !

<强> 1。先实现滑动右边触发左边的功能:

做法:

(1)定义变量先~在数据中加入一个listHight:[]数组;一个变量scrollY: 0,用来装目前的滚动的y位置坐标

(2)在方法中定义一个函数计算高度,此处还要用到一个知识点(如何获取分类列表dom元素?)还记得上一篇中使用到的。参美元吗?

我们先给要获取高度的那个元素取个类名,名字叫:“food-list-hook”:

让foodList=这个。美元refs.foodsWrapper.getElementsByClassName (& # 39; food-list-hook& # 39;)这样就获取了所有分类列表啦,计算方法定义如下:

_calculateHeight (), { 　　,,,//,console.log(这) 　　,,,let foodList =,这。美元refs.foodsWrapper.getElementsByClassName (& # 39; food-list-hook& # 39;) 　　,,,let height =0 　　,,,this.listHight.push(高度) 　　,,,for (let 小姐:=,0;,小姐:& lt;, foodList.length;,我+ +),{ 　　,,,,let item =, foodList[我] 　　,,,,height +=item.clientHeight 　　,,,,this.listHight.push(高度) 　　,,,} 　　}

(3)然后在计算属性计算中,来比较数组中的高度值与当前的滚动的y坐标值,返回的是当前所在高度的索引值:

在执行这一步时,scrollY的值,要怎么得到?(通过better-scroll检测“滚动”事件得到,此时,需要给其加上相应的参数,做法如截图中画红线处所示)

怎么在vue2.0中使用better-scroll实现一个移动端滑动

currentIndex (), { 　　,,,for (let 小姐:=,0;,小姐:& lt;, this.listHight.length;,我+ +),{ 　　,,,,let height1 =, this.listHight[我] 　　,,,,let height2 =, this.listHight(小姐:+,- 1) 　　,,,,if (! height2 | |, (this.scrollY 祝辞=,height1 ,,, this.scrollY & lt;, height2)), { 　　,,,,return 我　　,,,,} 　　,,,} 　　,,return 0 　　,,} 　　以前,}

(4)在模板中,将此索引值绑定到索引值相等的左侧的列表分栏中,并指定一个类名,叫电流,如下图中的画红线的部分:

怎么在vue2.0中使用better-scroll实现一个移动端滑动