基于vue组件封装的better-scroll(绝对能用)

使用Better-Scroll 来实现一些数据网格的翻页，例如上拉刷新，下拉加载更多

使用：npm install better-scroll --save
*说明：此插件没有封装数据网格，因为数据表结构会根据项目需求随时变化，所以只基于此插件基本结构进行封装
子组件：

<template>
  <div>

      <div class="wrapper" ref="wrapper">
          <slot></slot>
      </div>
    </div>


</template>

<script>
  import BScroll from "better-scroll"

  export default {
    name: 'videos',
    data(){
     return {
       scroll : '',
     }
    },
    props:{
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      scrollX: {
        type: Boolean,
        default: false
      },
      data: {
        type: Array,
        default: null
      },
      pullup: {
        type: Boolean,
        default: false
      },
      pulldown: {
        type: Boolean,
        default: false
      },
      beforeScroll: {
        type: Boolean,
        default: false
      },
      refreshDelay: {
        type: Number,
        default: 20
      }

    },
    methods : {
      initScroll(){
        if (this.$refs.wrapper){
          this.scroll = new BScroll(this.$refs.wrapper,{
            probeType: this.probeType,
            click: this.click,
            scrollX: this.scrollX
          })
          if (this.listenScroll) {
            let me = this
            this.scroll.on('scroll', (pos) => {
              me.$emit('scroll', pos)
            })
          }

         
          if (this.pullup) {
            this.scroll.on('scrollEnd', () => {
              // 滚动到底部
              if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                this.$emit('scrollToEnd')
              }
            })
          }

      
          if (this.pulldown) {
            this.scroll.on('touchEnd', (pos) => {
              // 下拉动作
              if (pos.y > 50) {
                this.$emit('pulldown')
              }
            })
          }

      
          if (this.beforeScroll) {
            this.scroll.on('beforeScrollStart', () => {
              this.$emit('beforeScroll')
            })
          }

        }
      },
      disable() {
        this.scroll && this.scroll.disable()
      },
      enable() {

        this.scroll && this.scroll.enable()
      },
      refresh() {
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }

    },
    mounted() {
      this.$nextTick(() => {
          setTimeout(()=>{
            this.initScroll()
          },20)
      })
    },
    watch: {
      // 监听数据的变化
      data() {
        setTimeout(() => {
          this.refresh()
        }, this.refreshDelay)
      }
    }

  };

</script>

<style lang="less" scoped>



</style>

使用：

<template>
  <div class="scroll" style="height: 30rem">
  <iscroll :height="height" :probeType="3" :pulldown="true" :pullup="true" @scrollToEnd="end()" @pulldown="refresh_()">

    <div class="lists">
      <div class="items" v-for="(item,index) in data">
        <span>{{item.title}}</span>
      </div>
    </div>
    <div class="refresh" v-show="refresh">刷新中</div>
    <div class="empty" v-show="total == 0">抱歉，暂无数据</div>
  </iscroll>
  </div>
</template>

<script>
  import iscroll from './video'
  import ajax from '../store/appApi.js'

  export default {
    name: "test_video",
    data() {
      return {
        data: [],
        height: '45rem',
        page: 1,
        total: 1,
        refresh : false

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getData();
      })
    },
    methods: {
      getData() {
        let datas = {
          pageNo: this.page,
          pageSize: 10
        }
        ajax.getHelps(datas).then((res) => {
          this.total = (res.data.items).length;
          for (var i = 0; i < this.total; i++) {
            this.data.push(res.data.items[i]);
            this.refresh = false;
          }
        })
      },
      refresh_(){

            setTimeout(()=>{
              this.page = 1;
              this.data = [];
              this.refresh = true;
              this.getData();
            },1000)


      },
      end() {
        if (this.page) {
          this.page++;
          if (this.total == 0) {
            return
          }
          this.getData();
        }
      }
    },
    components: {
      iscroll
    }
  }
</script>

<style lang="scss">
  .wrapper{
    height: 20rem;
  }
  body {
    .wrapper {
      .lists {
        .items {
          height: 8rem;
        }
      }
    }
  }
</style>