vue2.0 better-scroll 实现移动端滑动的示例代码
写在前面的话:
上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧
效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。
如下图所示界面,左侧为分栏,右侧为分栏详情。
滑动右边使左边联动的大概的思路:
1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中。
2)实现左边联动,则必须要监控 “scroll”事件,获取其高度
3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值
4)左侧的分类中,使与 index 相应的分栏高亮即可~
余留的问题:额,左侧怎么跟着一起滚动?应该还需要判断一下当前左侧栏中的scroll的位置,然后使之跟随变化,但是不同尺寸的手机,高度不一,怎么解决???我不知道……
点击左边时,右边实现自动定位的大概思路:
1)首先要使点击有效,因为 better-scroll将默认事件都阻止了
2)为左侧的分栏绑定点击事件,并获取 index ,然后使右边的相应 index 分类滚动就行了~so easy ....but!!!
怎么下手?!!
1. 先实现滑动右边触发左边的功能:
做法:
(1)定义变量先~ 在data中加入一个 listHight: [] 数组;一个变量scrollY : 0,用来装目前的scroll的y位置坐标
(2)在methods 中定义一个函数计算高度,此处还要用到一个知识点(如何获取 分类列表dom元素?)还记得上一篇中使用到的this.$refs 吗?
我们先给要获取高度的那个元素取个类名,名字叫:“food-list-hook”:
let foodList =this.$refs.foodsWrapper.getElementsByClassName('food-list-hook') 这样就获取了所有分类列表啦,计算方法定义如下:
_calculateHeight () { // console.log(this) let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook') let height = 0 this.listHight.push(height) for (let i = 0; i < foodList.length; i++) { let item = foodList[i] height += item.clientHeight this.listHight.push(height) } }
(3)然后在计算属性computed 中,来比较数组中的高度值与当前的 scroll 的y坐标值,返回的是当前所在高度的index值:
在执行这一步时,scrollY的值,要怎么得到?(通过better-scroll 检测“scroll”事件得到,此时,需要给其加上相应的参数,做法如截图中画红线处所示)
currentIndex () { for (let i = 0; i < this.listHight.length; i++) { let height1 = this.listHight[i] let height2 = this.listHight[i + 1] if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) { return i } } return 0 } }
(4)在 template 中,将此index 值绑定到index 值相等的左侧的列表分栏中,并指定一个类名,叫 current,如下图中的 画红线的部分:
(5)在style中,将相应的current 类加上相应的样式即可:
2. 再来实现点击左边,右边联动的效果
(1)使 左边栏 点击有效,如下图红线标注所示:
(2)为左侧栏 添加相应的点击事件:
(3)在methods 中编写点击触发的事件 selectMenu()方法,利用 获取的 $index 使右边进行相应的滚动,其中 300ms是加上了一个过渡效果:
试试吧~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章:
- vue better-scroll插件使用详解
- vue使用 better-scroll的参数和方法详解
- vue利用better-scroll实现轮播图与页面滚动详解
- vue滚动轴插件better-scroll使用详解
- 详解 vue better-scroll滚动插件排坑