1. 程式人生 > >vue結合 better-scroll 下拉加載問題

vue結合 better-scroll 下拉加載問題

無奈 its The 解決辦法 data line eth imp hidden

源碼:https://github.com/LY-u/vue_better-scroll
封裝scroll.vue組件, 在組件內加載:
import BScroll from better-scroll
組件內容:參考:https://github.com/LY-u/vue_better-scroll/blob/master/src/components/page.vue

封裝好的scroll.vue在項目中使用:
import BScroll from better-scroll
import scroll from @/components/scroll

註意事項:先引入better-scroll 組件 在引入scroll,期中BScroll組件不要再模板裏調用

components:{scroll}

APP.vue使用 scroll組件

<scroll class="wrap" ref=scrollEle :pulldown="true" :listenScroll=true :pullDownRefresh="pullDownRefreshObj" @pulldown="loadData" @scroll=scroll></scroll> <script> export default{ computed:{ pullDownRefreshObj(){
// 下拉刷新配置 return { threshold: 60, stop: 50, stopTime:1000 } }, }, //這裏具體參數配置 參考官方文檔 http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/api-specific.html 具體我也不太明白,我也是參考這裏一步一步寫的, methods:{ loadData(){ setTimeout(()=>{ this.finishPullDown().then(res=>{ console.log(
refresh) }) },1000) }, scroll(pos){ //監聽滾動 let y = -pos.y // alert(y) }, scrollTo(y) { return new Promise((resolve)=>{ this.$refs.scrollEle.scrollTo(0, -y, 500, bounce) resolve() }) }, scrollToElement(){ let el = document.querySelector(.to) this.$refs.scrollEle.scrollToElement(el,700) }, finishPullDown() { return this.$refs.scrollEle.finishPullDown() }, initScroll() { let s = this.$refs.scrollEle.scroll if(s){ return this.refreshScroll() }else{ return this.$refs.scrollEle._initScroll() } }, refreshScroll() { return this.$refs.scrollEle.refresh() }, }, }, mounted() { //初始化滾動條 this.initScroll() }, } </script> <style> .wrap{ //滾動條高度初始化 width: 100%; height: 100%; overflow:hidden; } </style> //寫到這裏,其實還有一個坑,不能實現滾動,怎麽解決了? 終於研究了半天,一個代碼一個代碼的去參考:https://github.com/LY-u/vue_better-scroll/tree/master/src/components 最終自己也無奈了,解決辦法就是在 <scroll class="wrap" ref=scrollEle :pulldown="true" :listenScroll=true :pullDownRefresh="pullDownRefreshObj" @pulldown="loadData" @scroll=scroll> <div></div> </scroll> 註意裏面的所有數據都要放在div裏面 ,然後滾動條就出來了。

vue結合 better-scroll 下拉加載問題