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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
DOM 事件流详解
Jan 20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
js和jquery中获取非行间样式
May 05 jQuery
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 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
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
初识Javascript小结
2015/07/16 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
用C++封装MySQL的API的教程
2015/05/06 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python和c语言的主要区别总结
2019/07/07 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
软件工程专业推荐信
2013/10/28 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
七年级上册生物的课件
2019/08/07 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers