本文實(shí)例為大家分享了vue實(shí)現(xiàn)滑動(dòng)以及左右聯(lián)動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

一、首先需要在項(xiàng)目中引入better-scroll

1. 在package.json 直接寫(xiě)入 'better-scroll':'^1.15.1' 版本以github上為準(zhǔn)（目前最新）

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

3.直接在你的組件里面寫(xiě)入import BScroll from ’better-scroll’;

二、better-scroll優(yōu)點(diǎn)

1.體驗(yàn)像原生：滾動(dòng)非常流暢，而且沒(méi)有滾動(dòng)條。

2.滾動(dòng)位置固定：在vue中通過(guò)路由切換頁(yè)面時(shí)組件會(huì)自動(dòng)滾動(dòng)到頂部，需要監(jiān)聽(tīng)滾動(dòng)行為才能讓滾動(dòng)位置固定，better-scroll解決了這個(gè)問(wèn)題。

三、下面是在項(xiàng)目中的使用

移動(dòng)端很常見(jiàn)的效果，當(dāng)滑動(dòng)右邊部分的時(shí)候，左邊會(huì)聯(lián)動(dòng)顯示與當(dāng)前內(nèi)容相符合的標(biāo)題高亮，當(dāng)點(diǎn)擊左邊某一個(gè)標(biāo)題的時(shí)候，右邊會(huì)自動(dòng)滑動(dòng)到相應(yīng)的內(nèi)容。

項(xiàng)目如下圖：

實(shí)現(xiàn)及說(shuō)明

1.滾動(dòng)效果

better-scroll在使用的時(shí)候需要在dom元素渲染完成之后初始化better-scroll的實(shí)例，初始化的時(shí)候，先要獲取需要滑動(dòng)的元素，然后在初始化的時(shí)候?qū)@取到的元素傳遞給初始化函數(shù)，此時(shí)便可實(shí)現(xiàn)滑動(dòng)效果

2.左右聯(lián)動(dòng)效果

左右聯(lián)動(dòng)效果的實(shí)現(xiàn)，是better-scroll通過(guò)監(jiān)聽(tīng)事件實(shí)現(xiàn)的。

首先獲取到右邊內(nèi)容盒子的高度，然后獲取到該盒子中每一項(xiàng)的高度并做前n項(xiàng)高度累加（第n項(xiàng)的高度是前n項(xiàng)的高度和）存儲(chǔ)到listHeight數(shù)組中。在初始化的時(shí)候傳遞屬性probeType=3 （探針的效果，時(shí)時(shí)獲取滾動(dòng)高度），并給右邊的內(nèi)容盒子對(duì)象監(jiān)聽(tīng)scroll事件，從而時(shí)時(shí)獲取Y軸位置，來(lái)與listHeight數(shù)組中的數(shù)據(jù)做比較，時(shí)時(shí)計(jì)算當(dāng)前的索引值，并給對(duì)邊對(duì)應(yīng)索引值的項(xiàng)添加背景色高亮，從而實(shí)現(xiàn)右邊滑動(dòng)，聯(lián)動(dòng)左邊。

當(dāng)點(diǎn)擊左邊的每一項(xiàng)的時(shí)候，獲取到當(dāng)前的索引值，并根據(jù)當(dāng)前的索引值獲取到與右邊內(nèi)容盒子中對(duì)應(yīng)索引的元素，右邊的盒子元素通過(guò)監(jiān)聽(tīng)scrollToElement，并傳遞獲取到的對(duì)應(yīng)索引元素和動(dòng)畫(huà)時(shí)間，從而實(shí)現(xiàn)點(diǎn)擊左邊，實(shí)現(xiàn)右邊聯(lián)動(dòng)；

實(shí)現(xiàn)代碼如下：

<template> <section class='box'> <div class='head'> head </div> <div class='content'> <div ref='left'> <ul> <li v-for='(item, index) in left' :key='item' : @click='selectItem(index, $event)'> <span class='left-item'>{{item}}</span> </li> </ul> </div> <div ref='right'> <ul> <li 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, //實(shí)時(shí)獲取當(dāng)前y軸的高度 clickEvent: false } }, methods: { _initScroll () { //better-scroll的實(shí)現(xiàn)原理是監(jiān)聽(tīng)了touchStart,touchend事件，所以阻止了默認(rèn)的事件（preventDefault） //所以在這里做點(diǎn)擊的話，需要在初始化的時(shí)候傳遞屬性click,派發(fā)一個(gè)點(diǎn)擊事件 //在pc網(wǎng)頁(yè)瀏覽模式下，點(diǎn)擊事件是不會(huì)阻止的，所以可能會(huì)出現(xiàn)2次事件，所以為了避免2次，可以在綁定事件的時(shí)候把$event傳遞過(guò)去 this.lefts = new BScroll(this.$refs.left, { click: true }) this.rights = new BScroll(this.$refs.right, { probeType: 3 //探針的效果，實(shí)時(shí)獲取滾動(dòng)高度 }) //rights這個(gè)對(duì)象監(jiān)聽(tīng)事件，實(shí)時(shí)獲取位置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的派發(fā)事件的event和普通瀏覽器的點(diǎn)擊事件event有個(gè)屬性區(qū)別_constructed //瀏覽器原生點(diǎn)擊事件沒(méi)有_constructed所以當(dāng)時(shí)瀏覽器監(jiān)聽(tīng)到該屬性的時(shí)候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] //當(dāng)height2不存在的時(shí)候，或者落在height和height2之間的時(shí)候，直接返回當(dāng)前索引 //>=height，是因?yàn)橐婚_(kāi)始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沒(méi)有的話，就返回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>

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。