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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
js数组去重的方法汇总
Jul 29 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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实现删除非站内外部链接实例代码
2014/06/17 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
DOM事件探秘篇
2017/02/15 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
python梯度下降法的简单示例
2018/08/31 Python
Django分页功能的实现代码详解
2019/07/29 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
促销活动方案模板
2014/02/24 职场文书
教师演讲稿大全
2014/05/16 职场文书
销售活动策划方案
2014/08/26 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
三好学生竞选稿
2015/11/21 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Nginx安装配置详解
2022/06/25 Servers