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动态加载Js文件和Css文件
Oct 24 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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捕获Fatal error错误的方法
2014/06/11 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python 实现有道翻译功能
2021/02/26 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
金融管理应届生求职信
2014/02/20 职场文书
校园安全标语
2014/06/07 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
详解flex:1什么意思
2022/07/23 HTML / CSS