better-scroll插件的簡單使用

better-scroll插件的簡單使用

前言

下載安裝

使用步驟

原理

實戰

效果圖

結束語

前言

因為better-scroll是一個注重移動端的滑動插件，并且better-scroll在vue.js開發項目中用的也十分的廣泛，所以這次我們來講解一下better-scroll在vue.js中的簡單用法。

下載安裝

可以直接npm工具下載，即在終端輸入npm install better-scroll

也可以去github上下載

使用步驟

首先導入一下better-scroll

創建實例，并掛載到元素標簽上去

設置一些事件監聽，完成自己想要的功能

原理

其實就僅僅只需要前兩個步驟，就可以完成better-scroll的滑動功能，是不是很簡單呢？但無論如何我們都還要簡單了解一下better-scroll的作用原理，這是我從官網拿來的一張圖。

我來解釋一下這幅圖，意思就是首先我們需要一個容器，即圖中的wrpper，確定我們滑動窗口的大小，其次在這個容器內部放一個content，也只能放一個content，其他雜亂的東西可以放在content內部，這個content高度不限，將我們的better-scroll實例掛在到wrpper上后，即可實現滑動。

實戰

標簽結構

1

2

3

4

5

6

7

8

9

10

11

12

13

14

css簡單樣式

.wrapper{ height: 100px; /*最外層的wrapper高度必須設置，這決定了滑動窗口的大小*/ overflow: hidden; /*為了將多余內容隱藏，使滾動明顯點*/ background: cyan /*背景設置一下顏色，讓大家看的更清楚*/ }

1

2

3

4

5

better-scroll引用

//導入better-scroll import BScroll from 'better-scroll' //創建better-scroll實例并掛在到wrapper上 const bscroll = new BScroll('.wrapper', () => { //第二個參數是一個回調函數，用到復雜的功能要在這里配置，簡單的滑動，這里不需要寫任何東西 })

1

2

3

4

5

6

效果圖

為了讓大家更能理解better-scroll的原理，以及作用過程，我這里做了兩張圖，分別是給wrapper加了overflow: hidden樣式以及沒有加overflow: hidden樣式的效果圖.

加了overflow: hidden樣式的效果圖

未加overflow: hidden樣式的效果圖

想必這下大家對better-scroll有所了解了吧，這是個簡單的使用，但卻非常的實用，因為原生的js滑動會比較卡頓，所以有時需要可以用一下這個插件，還是不錯的，而且一點都不難，就幾個代碼就可以實現，何樂而不為呢

結束語

當然了，想要better-scroll更多用法的可以去他的官網看官方文檔，我這里只是向大家介紹一下初步使用，之后我還會繼續更新better-scroll在項目開發中的一些用法以及遇到的一些bug解決方法，大家有興趣的可以關注一下。

GitHub

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。