vue结合 better-scroll 下拉加载问题

Posted 2020-11-21 hxp87

源码：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里面  ，然后滚动条就出来了。