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

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

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

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

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

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

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

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

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

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

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

1.滾動效果

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

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

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

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

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

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

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

demo中用到的數(shù)據(jù)結(jié)構(gòu)

demo中用到的方法

方法的調(diào)用

屬性計(jì)算

樣式不做過多介紹

需要注意的是，該頁面的這一部分給了固定的高度，且超出部分overflow：hidden;

3.better-scroll實(shí)現(xiàn)水平滑動效果

項(xiàng)目中經(jīng)常會遇到需要水平滑動的需求，現(xiàn)在就用better-scroll來實(shí)現(xiàn)它

better-scroll的使用方式跟上邊的說明是一樣，只是配置項(xiàng)發(fā)生了變化，下面將代碼貼出來，就明了了。

template部分

js部分

css部分

注意事項(xiàng)：

1.tab_content是內(nèi)容的盒子，他的長度就是內(nèi)容的寬度；

2.由于內(nèi)容的盒子是需要滑動的，所以在內(nèi)容盒子的外邊還需要在加一層盒子，寬度為100%。

better-scroll插件git地址https://github.com/ustbhuangyi/better-scroll

總結(jié)

以上所述是小編給大家介紹的vue中使用better-scroll實(shí)現(xiàn)滑動效果及注意事項(xiàng)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論