怎么在vue中使用better-scroll實現(xiàn)一個滑動效果-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么在vue中使用better-scroll實現(xiàn)一個滑動效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站設計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的武陵源網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

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

1. 在package.json 直接寫入 "better-scroll":"^1.11.1" 版本以github上為準（目前最新）

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

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

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

1.體驗像原生：滾動非常流暢，而且沒有滾動條。

2.滾動位置固定：在vue中通過路由切換頁面時組件會自動滾動到頂部，需要監(jiān)聽滾動行為才能讓滾動位置固定，better-scroll解決了這個問題。

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

先給大家介紹最終要實現(xiàn)的效果

就是移動端很常見的效果，當滑動右邊部分的時候，左邊會聯(lián)動顯示與當前內(nèi)容相符合的標題高亮，當點擊左邊某一個標題的時候，右邊會自動滑動到相應的內(nèi)容。

怎么在vue中使用better-scroll實現(xiàn)一個滑動效果

實現(xiàn)及說明

1.滾動效果

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

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

左右聯(lián)動效果的實現(xiàn)，是better-scroll通過監(jiān)聽事件實現(xiàn)的。

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

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

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

html結(jié)構(gòu)

怎么在vue中使用better-scroll實現(xiàn)一個滑動效果