vue+mescroll=VScrollFull

VScrollFull 介绍

  • 这个组件是什么?
    是为了方便的使用下拉刷新,上拉加载而去封装的一个依赖于 mescroll.js 的 vue 组件(未发布,文末代码~)

  • 封装这个组件使用了什么?
    mescroll.js
    vue.js

  • 封装这个组件的理由?
    没有找到满意的 vue 下拉刷新组件,正在使用的上拉加载的组件使用也不够优雅,然后找到了 mescroll.js(可以去其官网案例一睹为快) 并简单封装了下使其能在 vue 项目中更方便的使用

效果演示 在线体验

下拉刷新+上拉加载

下拉刷新布局需要注意的是,若第一屏没有现实组件,则无法触发下拉刷新,滑动到滚动位置需要设置 position:fixed,急需要吸顶效果时才能使用下拉,好像没啥毛病~~~

上拉加载/滚动加载

项目中使用 组件所在仓库地址

  1. 安装 mescroll.js : npm install --save mescroll.js
  2. 将下面代码拷贝到项目/参考下面代码封装自己的滚动组件
  3. 在页面中引入并使用

组件封装代码

<template>
  <div :id="refName" class="mescroll" :ref="refName">
    <div :class="emptyCls" v-show="showEmptySlot">
      <slot name="empty"></slot>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
  props: {
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      showEmptySlot: false,
      refName: 'mescroll_' + Date.now(),
      instance: null
    }
  },
  computed: {
    emptyCls() {
      return this.refName + '_empty'
    }
  },
  mounted() {
    this.$nextTick(this.$_init())
  },
  methods: {
    $_init() {
      this.showEmptySlot = false
      if (this.instance) this.instance.destroy()
      this.instance = new MeScroll(this.refName, {
        down: {
          use: true,
          auto: false //默认不执行下拉刷新的回调
        },
        up: {
          callback: this.$_upCallback,
          use: true,
          isBounce: false,
          offset: 100,
          noMoreSize: 10,
          loadFull: {
            //不满一屏自动加载
            use: false,
            delay: 500
          },
          page: {
            num: 0,
            size: this.pageSize,
            time: null
          },
          scrollbar: {
            use: false
          }
        }
      })
      let _this = this
      this.instance.showEmpty = function() {
        _this.showEmptySlot = true
      }
      this.instance.removeEmpty = function() {
        _this.showEmptySlot = false
      }
    },
    // 上拉回调
    $_upCallback(page) {
      this.$emit('load', page.num)
    },
    getInstance() {
      return this.instance
    },
    endByPage(curPagelen, totalPage) {
      this.instance && this.instance.endByPage(curPagelen, totalPage)
    }
  }
}
</script>

测试代码

<div style="height:300px;border:1px solid green;">
  <v-scroll-full ref="myscrollfull"  @load="loadData">
    <div slot="empty" style="text-align:center">无任何数据</div>
    <div v-for="(item,index) in list" :key="index">
    {{item}}
    </div>
  </v-scroll-full>
</div>

<script>
export default {
  data () {
    return {
      list: []
    }
  },
  methods:{
      loadData(pageIndex){
        setTimeout(()=>{
            if(pageIndex==1)this.list=[]
            for(var i=0;i<20;i++){
                this.list.push(pageIndex+'_'+i)
            }
            this.$refs.myscrollfull.endByPage(this.list.length,3)
        },1000)
      }
  }
}
</script>

相关资料