代碼：
<template>
<div id="app">
<div class="wrapper" ref="wrapper">
<ul class="content">
壬戌之秋货徙，七月既望，蘇子與客泛舟游于赤壁之下痴颊。清風(fēng)徐來，水波不興锌杀。舉酒屬客泻仙，誦明月之詩，歌窈窕之章饰豺。少焉，月出于東山之上冤吨，徘徊于斗牛之間。白露橫江垒探，水光接天』穑縱一葦之所如捺癞，凌萬頃之茫然。浩浩乎如馮虛御風(fēng)髓介，而不知其所止；飄飄乎如遺世獨立唐础，羽化而登仙矾飞。
于是飲酒樂甚呀邢，扣舷而歌之。歌曰：“桂棹兮蘭槳价淌，擊空明兮溯流光。渺渺兮予懷豺型，望美人兮天一方买乃。”客有吹洞簫者剪验，倚歌而和之前联。其聲嗚嗚然，如怨如慕似嗤，如泣如訴，余音裊裊乘粒，不絕如縷。舞幽壑之潛蛟灯萍，泣孤舟之嫠婦每聪。
蘇子愀然，正襟危坐而問客曰：“何為其然也药薯？”客曰：“月明星稀，烏鵲南飛童本，此非曹孟德之詩乎？西望夏口讨跟，東望武昌，山川相繆晾匠，郁乎蒼蒼，此非孟德之困于周郎者乎薪寓？方其破荊州，下江陵向叉，順流而東也嗦董，舳艫千里，旌旗蔽空京革，釃酒臨江，橫槊賦詩匹摇，固一世之雄也，而今安在哉懈贺？況吾與子漁樵于江渚之上坡垫，侶魚蝦而友麋鹿，駕一葉之扁舟冰悠，舉匏樽以相屬。寄蜉蝣于天地涕蚤，渺滄海之一粟。哀吾生之須臾万栅，羨長江之無窮西疤。挾飛仙以遨游，抱明月而長終。知不可乎驟得扰她，托遺響于悲風(fēng)∧蹙。”
蘇子曰：“客亦知夫水與月乎忧勿？逝者如斯，而未嘗往也鸳吸；盈虛者如彼，而卒莫消長也坎拐。蓋將自其變者而觀之，則天地曾不能以一瞬廉白；自其不變者而觀之乖寒，則物與我皆無盡也院溺，而又何羨乎！且夫天地之間珍逸，物各有主，茍非吾之所有叭爱，雖一毫而莫取。惟江上之清風(fēng)买雾，與山間之明月杨帽，耳得之而為聲，目遇之而成色注盈，取之無禁，用之不竭僚饭，是造物者之無盡藏也，而吾與子之所共適鳍鸵。”
客喜而笑权纤，洗盞更酌。肴核既盡外邓，杯盤狼籍古掏。相與枕藉乎舟中，不知東方之既白槽唾。
</ul>
</div>
</div>
</template>
<script>
import BScroll from '@better-scroll/core'
export default {
name: 'App',
mounted() {
this.$nextTick(() => {
let bs = new BScroll(this.$refs.wrapper, {
click: true
})
})
}
}
</script>
<style scoped>
.wrapper {
height: 100vh;
border: 2px solid red;
box-sizing: border-box;
overflow: hidden;
}
.content {
border: 2px solid green;
height: 900px;
}
</style>
注意點：
1.外層容器必須給定給高度，并設(shè)置overflow: hidden;
2.移動端布局時拧烦，要注意box-sizing: border-box;和body自身外邊距的影響钝计；
3.鉤子函數(shù)mounted是在el掛載到實例上后調(diào)用，此時DOM開始渲染但仍未渲染私恬；
4.vm.$nextTick：
- nextTick接收一個回調(diào)函數(shù)作為參數(shù)，它的作用是將回調(diào)延遲到下次DOM更新之后執(zhí)行疫衩；
- 在這里的作用是確保DOM結(jié)構(gòu)渲染完成從而確保子元素bscroll-container高度計算準確荣德；
一些常用方法：
- refresh()：重新計算BetterScroll，當(dāng)DOM解構(gòu)發(fā)生變化時涮瞻，確保滾動效果正常；
- scrollTo(x, y, time, easing, extraTransform): 滾動到指定位置皆愉，time指定動畫時間；
一些事件：
- refresh：BetterScroll重新計算時觸發(fā)幕庐；
bs.on('refresh', () => {})
- scroll: 正在滾動時觸發(fā)；
bs.on('scroll', (position) => {
console.log(position.x, position.y);
})
下面的事件必須注冊相應(yīng)插件才能使用：
- pullingDown(pull-down)下拉刷新：
import BScroll from '@better-scroll/core'
import Pulldown from '@better-scroll/pull-down'
//注冊插件
BScroll.use(Pulldown)
export default {
name: 'App',
mounted() {
this.$nextTick(() => {
let bs = new BScroll(this.$refs.wrapper, {
pullDownRefresh: true
})
bs.on('pullingDown', (position) => {
await fetchData()
console.log('ddd');
bs.finishPullDown()
})
})
}
}
- pullingUp(pull-up)上拉刷新:
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)
export default {
name: 'App',
mounted() {
this.$nextTick(() => {
let bs = new BScroll(this.$refs.wrapper, {
pullUpLoad: true
})
bs.on('pullingUp', (position) => {
// await fetchData()異步請求數(shù)據(jù)
console.log('ddd');
bs.finishPullUp()
})
})
}
}
