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中for in 和 for each in的区别
Apr 23 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
Vue实现购物车基本功能
Nov 08 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 register_globals 值为on与off的理解
2013/09/26 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
JavaScript中Function详解
2015/02/27 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
python基础教程之常用运算符
2014/08/29 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python实现简单http服务器
2018/04/12 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
简单了解python中的与或非运算
2019/09/18 Python
Pytorch释放显存占用方式
2020/01/13 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
幼师专业求职推荐信
2013/11/08 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
农场厂长岗位职责
2013/12/28 职场文书
文案策划求职信
2014/04/14 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书