本文实例为大家分享了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解决了这个问题。
三、下面是在项目中的使用
移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。
项目如下图:
实现及说明
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组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]