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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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
第一节--面向对象编程
2006/11/16 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Django中几种重定向方法
2015/04/28 Python
Python3实现Web网页图片下载
2016/01/28 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
团员学习总结的自我评价范文
2013/10/14 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
工会换届选举方案
2014/05/21 职场文书
新闻稿格式范文
2015/07/18 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python