未加星标

vue2.0 better-scroll 实现移动端滑动的示例代码

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

写在前面的话:

上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧

效果:滑动右侧时,左侧也能有相应的变化;点击左侧时,右侧也能自动定位到相应的位置。

如下图所示界面,左侧为分栏,右侧为分栏详情。

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”事件得到,此时,需要给其加上相应的参数,做法如截图中画红线处所示)

vue2.0 better-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,如下图中的 画红线的部分:

vue2.0 better-scroll 实现移动端滑动的示例代码
 

(5)在style中,将相应的current 类加上相应的样式即可:

vue2.0 better-scroll 实现移动端滑动的示例代码

2. 再来实现点击左边,右边联动的效果

(1)使 左边栏 点击有效,如下图红线标注所示:

    
vue2.0 better-scroll 实现移动端滑动的示例代码

(2)为左侧栏 添加相应的点击事件:

vue2.0 better-scroll 实现移动端滑动的示例代码

(3)在methods 中编写点击触发的事件 selectMenu()方法,利用 获取的 $index 使右边进行相应的滚动,其中 300ms是加上了一个过渡效果:

vue2.0 better-scroll 实现移动端滑动的示例代码

试试吧~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:vue滚动轴插件better-scroll使用详解vue利用better-scroll实现轮播图与页面滚动详解vue使用 better-scroll的参数和方法详解vue better-scroll插件使用详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 定位变量
tags: scroll,let,index,分栏,better,listHight,左侧,点击,foodList,scrollY,height,vue,高度
分页:12
转载请注明
本文标题:vue2.0 better-scroll 实现移动端滑动的示例代码
本站链接:https://www.codesec.net/view/571644.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(51)