vue使用better-scroll实现滑动以及左右联动


Posted in Javascript onJune 30, 2020

本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下

一、首先需要在项目中引入better-scroll

1. 在package.json 直接写入 "better-scroll":"^1.15.1"  版本以github上为准(目前最新)

2.cpnm install  在node_modules  可以查看版本是否安装

3.直接在你的组件里面写入import BScroll from 'better-scroll';

二、better-scroll优点

1.体验像原生:滚动非常流畅,而且没有滚动条。

2.滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。

三、下面是在项目中的使用

移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。

项目如下图:

vue使用better-scroll实现滑动以及左右联动

实现及说明

1.滚动效果

better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例,初始化的时候,先要获取需要滑动的元素,然后在初始化的时候将获取到的元素传递给初始化函数,此时便可实现滑动效果

2.左右联动效果

左右联动效果的实现,是better-scroll通过监听事件实现的。

首先获取到右边内容盒子的高度,然后获取到该盒子中每一项的高度并做前n项高度累加(第n项的高度是前n项的高度和)存储到listHeight数组中。在初始化的时候传递属性probeType=3 (探针的效果,时时获取滚动高度),并给右边的内容盒子对象监听scroll事件,从而时时获取Y轴位置,来与listHeight数组中的数据做比较,时时计算当前的索引值,并给对边对应索引值的项添加背景色高亮,从而实现右边滑动,联动左边。

当点击左边的每一项的时候,获取到当前的索引值,并根据当前的索引值获取到与右边内容盒子中对应索引的元素,右边的盒子元素通过监听scrollToElement,并传递获取到的对应索引元素和动画时间,从而实现点击左边,实现右边联动;

实现代码如下:

<template>
 <section class="box">
 <div class="head">
 head
 </div>
 <div class="content">
 <div class="left" ref="left">
 <ul>
  <li v-for="(item, index) in left" :key="item" :class="{current: currentIndex == index}" @click="selectItem(index, $event)">
  <span class="left-item">{{item}}</span>
  </li>
 </ul>
 </div>
 <div class="right" ref="right">
 <ul>
  <li class="right-item right-item-hook" v-for="item in right" :key="item.name">
  <h2>{{item.name}}</h2>
  <ul>
  <li v-for="num in item.content" :key="num.name">
  <div>{{item.name+num}}</div>
  </li>
  </ul>
  </li>
 </ul>
 </div>
 </div>
 </section>
</template>
<script>
import BScroll from 'better-scroll'
export default {
 data () {
 return {
 left: ['a', 'b', 'c', 'd', 'e', 'f'],
 right: [
 {
  name: 'a',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'b',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'c',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'd',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'e',
  content: ['1', '2', '3', '4', '5']
 },
 {
  name: 'f',
  content: ['1', '2', '3', '4', '5']
 },
 ],
 listHeight: [],
 scrollY: 0, //实时获取当前y轴的高度
 clickEvent: false
 }
 },
 methods: {
 _initScroll () {
 //better-scroll的实现原理是监听了touchStart,touchend事件,所以阻止了默认的事件(preventDefault)
 //所以在这里做点击的话,需要在初始化的时候传递属性click,派发一个点击事件
 //在pc网页浏览模式下,点击事件是不会阻止的,所以可能会出现2次事件,所以为了避免2次,可以在绑定事件的时候把$event传递过去
 this.lefts = new BScroll(this.$refs.left, {
 click: true
 })
 this.rights = new BScroll(this.$refs.right, {
 probeType: 3 //探针的效果,实时获取滚动高度
 })
 //rights这个对象监听事件,实时获取位置pos.y
 this.rights.on('scroll', (pos) => {
 this.scrollY = Math.abs(Math.round(pos.y))
 })
 },
 _getHeight () {
 let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
 let height = 0
 this.listHeight.push(height)
 for(let i = 0; i < rightItems.length; i++){
 let item = rightItems[i]
 height += item.clientHeight
 this.listHeight.push(height)
 }
 },
 selectItem(index,event){
 this.clickEvent = true
 //在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
 //浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
 if(!event._constructed){
 return
 }else{
 let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
 let el = rightItems[index]
 this.rights.scrollToElement(el, 300)
 }
 }
 },
 mounted () {
 this.$nextTick(() => {
 this._initScroll()
 this._getHeight()
 })
 },
 computed: {
 currentIndex () {
 for(let i = 0; i < this.listHeight.length; i ++){
 let height = this.listHeight[i]
 let height2 = this.listHeight[i + 1]
 //当height2不存在的时候,或者落在height和height2之间的时候,直接返回当前索引
 //>=height,是因为一开始this.scrollY=0,height=0
 if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
  return i
 }
 if(this.listHeight[this.listHeight.length - 1] - this.$refs.right.clientHeight <= this.scrollY){
  if(this.clickTrue){
  return this.currentNum
  }else{
  return (this.listHeight.length - 1)
  }
 }
 }
 //如果this.listHeight没有的话,就返回0
 return 0
 }
 }
}
</script>
<style scoped>
.content{
 display: flex;
 position: absolute;
 top:100px;
 bottom:100px;
 width:100%;
 overflow: hidden;
 background: #eee;
}
.left{
 flex: 0 0 80px;
 width:80px;
 background-color: #f3f5f7;
}
 .left li{
 width: 100%;
 height: 100%;
 }
 .current{
 background-color: red;
 }
 .left-item{
 display: block;
 width:100%;
 height:100px;
 line-height: 50px;
 text-align: center;
 border-bottom:1px solid yellow;
 }
 .right{
 flex: 1;
 }
 .right-item li{
 width:100%;
 height:100px;
 line-height:100px;
 text-align: center;
 border-bottom: 1px solid yellow;
 }
 *{
 list-style: none;
 margin: 0;
 padding: 0;
 }
</style>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
JS简易计算器实例讲解
Jun 30 #Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
JSON获取属性值方法代码实例
Jun 30 #Javascript
JS猜数字游戏实例讲解
Jun 30 #Javascript
vue实现评价星星功能
Jun 30 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
详解JS面向对象编程
2016/01/24 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python多线程原理与用法详解
2018/08/20 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python Shapely使用指南详解
2020/02/18 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
关工委先进个人事迹材料
2014/05/23 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
《实心球》教学反思
2016/02/23 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android