使用時(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. 這里只是舉例，并不是一定要這樣寫。
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中寫入
<div class="wrapper" ref="wrapper" :scrollbar="options.scrollbar" :startY="options.startY">
5.在methods中寫入方法，我自定義的
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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
