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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
使用python Django做网页
2013/11/04 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python 切分数组实例解析
2019/11/07 Python
python实现加密的方式总结
2020/01/19 Python
pytorch中的inference使用实例
2020/02/20 Python
python实现低通滤波器代码
2020/02/26 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
用Python实现职工信息管理系统
2020/12/30 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
小学领导班子对照材料
2014/08/23 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL