better scroll 在vue中的使用

2021-10-05 09:05:54 字數 999 閱讀 6228

**

="test"

>

"box"

class

="box" style=

"height:400px;overflow:hidden"

>

="content"

>

="green"

>

<

/li>

="yellow"

>

<

/li>

="red" ref=

"red"

>

<

/li>

="blue"

>

<

/li>

<

/ul>

<

/div>

"gored"

>跳轉到紅色<

/button>

<

/div>

<

/template>

import bscroll from

"better-scroll"

;export

default);

},methods:);

//註冊滑動事件,同時需要設定probetype派發scroll事件

this

.scroll.on(

"scroll"

, pos =>);

},gored()

},};

<

/script>

ul li

.green

.yellow

.red

.blue

<

/style>

注意:需要滾動的盒子的高度必要小於內容的高度,並且設定overflow:hidden

這裡註冊了scroll事件和scrolltoelement方法,其他的事件和方法操作都是一樣的,詳細請看官方文件:better-scroll官方位址

better scroll在vue中的坑

在我們日常的移動端專案開發中,處理滾動列表是再常見不過的需求了,以滴滴為例,可以是這樣豎向滾動的列表,如圖所示 也可以是橫向滾動的導航欄,如圖所示 我們在實現這類滾動功能的時候,會用到我寫的第三方庫,better scroll。什麼是 better scroll better scroll 是乙個移...

better scroll 實現無縫輪播

better scroll 適用於解決移動端各種滾動場景,滾動列表 輪播圖等。better scroll新版本設定輪播圖有一些變動。slider.vue 結構及部分樣式設定 插槽位置即輪播圖,在引入主頁面的中間插入 小圓點採用絕對定位 import common stylus variable sl...

better scroll 上拉載入

首先需要乙個使用了bs編寫的列表 肯定是不能有bug的 bs中文文件 this.actscroll new bscroll actbox,pullupload 在初始化配置項裡面新增pullupload配置選項,給定上拉的數值 觸發上拉載入的事件,呼叫getinfo 請求資料 this.actscr...