vue2中引用及使用 better-scroll的方法詳解
使用時(shí)有三個(gè)要點(diǎn)：
一：html部分
<div class="example" ref="divScroll">
<div>
<p>內(nèi)容1</p>
<p>內(nèi)容2</p>
<ul>
<li>list1</li>
<li>list2</li>
<ul>
</div>
</div>
【注】
1.最外層加ref，讓better-scroll通過(guò)ref來(lái)獲取整個(gè)div；
2.緊跟一個(gè)div，不用加任何樣式或class， 最終可以滑動(dòng)的部分就是這個(gè)div，這個(gè)div必須是 加了ref 的div 的 直接子元素。 在這個(gè)div里面就可以放置希望滑動(dòng)的內(nèi)容了。
二： css部分
.example width: 100% position: absolute top: 174px bottom: 48px left: 0 overflow: hidden
【注】 1. 這里只是舉例，并不是一定要這樣寫(xiě)。
2. 首先將 獲取到的加了 ref 的div 的 高度固定， 可以設(shè)置定位， 也可以設(shè)置 height， max-height...
3. 加 overflow: hidden 。
三： js 部分
首先 引入 better-scroll：
import BScroll from 'better-scroll';
1: 使用 mounted() 函數(shù)
mounted() {
this.scroll = new BScroll(this.$refs.divScroll, {
click: true,
});
},
2.使用 created() 函數(shù)
created() {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.divScroll, {
click: true,
});
});
},
【注】 1.使用created 函數(shù) 要異步執(zhí)行（此時(shí)html 尚未渲染完成）。
2. mounted函數(shù) 無(wú)需異步執(zhí)行（mounted 函數(shù)在html渲染完成后觸發(fā)）。
下面看下Vue中引入better-scroll的方法
1.用npm 安裝好 better-scroll
npm install--save better-scroll
2.在需要的頁(yè)面引入
import BScroll from 'better-scroll'
3.在data中定義 better-scroll的參數(shù)
options: {
pullDownRefresh: {
threshold: 50, // 當(dāng)下拉到超過(guò)頂部 50px 時(shí)，觸發(fā) pullingDown 事件
stop: 20 // 刷新數(shù)據(jù)的過(guò)程中，回彈停留在距離頂部還有 20px 的位置
},
pullUpLoad: {
threshold: -20 // 在上拉到超過(guò)底部 20px 時(shí)，觸發(fā) pullingUp 事件
},
// pullDownRefresh: false, //關(guān)閉下拉
// pullUpLoad: false, // 關(guān)閉上拉
click: true,
probeType: 3,
startY: 0,
scrollbar: true
}
4.在template中寫(xiě)入
<div class="wrapper" ref="wrapper" :scrollbar="options.scrollbar" :startY="options.startY">
5.在methods中寫(xiě)入方法，我自定義的
load() {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, this.options);
// 上拉
this.scroll.on('pullingUp', () => {
// 刷新數(shù)據(jù)的過(guò)程中，回彈停留在距離頂部還有20px的位置
this.setData();
})
} else {
this.scroll.refresh()
}
},
setData() {
this.$nextTick(() => {
let arr = [1, 2, 3, 'james'];
this.data = this.data.concat(arr)// 添加數(shù)據(jù)
this.scroll.finishPullUp();
this.pullingDownUp()
})
}，
pullingDownUp() {
this.scroll.refresh() //重新計(jì)算元素高度
},
6.在created中加載
this.$nextTick(() => {
this.load()
this.setData()
})
總結(jié)
以上所述是小編給大家介紹的vue2中引用及使用 better-scroll的方法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼代碼示例
現(xiàn)在我們管理后臺(tái)有個(gè)需求,就是登錄頁(yè)面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式
這篇文章主要介紹了vue單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本文通過(guò)實(shí)例代碼給大家介紹了基于Vue開(kāi)發(fā)數(shù)字輸入框組件,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
解決vue prop傳值default屬性如何使用,為何不生效的問(wèn)題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue?按需引入vant跟全局引入方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js實(shí)現(xiàn)全屏背景圖片滑動(dòng)切換特效
本文主要介紹了Vue.js實(shí)現(xiàn)全屏背景圖片滑動(dòng)切換特效,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
下面小編就為大家分享一篇vue 頁(yè)面加載進(jìn)度條組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02