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


Posted in Javascript onJanuary 25, 2018

写在前面的话:

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

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

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

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 实现移动端滑动的示例代码

试试吧~

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

Javascript 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
Jquery $when done then的用法详解
May 20 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue按需加载实例详解
Sep 06 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 #Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 #Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 #Javascript
基于vue开发的在线付费课程应用过程
Jan 25 #Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 #Javascript
关于express与koa的使用对比详解
Jan 25 #Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery实现html元素拖拽
2015/07/21 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python在线运行代码助手
2016/07/15 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python和go语言的区别是什么
2020/07/20 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
python 写一个文件分发小程序
2020/12/05 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
物业工作计划书
2014/01/10 职场文书
校园文化建设方案
2014/02/03 职场文书
文秘应届生求职信
2014/07/05 职场文书
质检员岗位职责
2015/02/03 职场文书
银行自荐信怎么写
2015/03/05 职场文书
工程部岗位职责范本
2015/04/11 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书