vue-mobile-page v1.0.16

vue-mobile-page

vue移动端下拉分页插件，其本质是使用指令实现。

Feature

• 节流函数throttle控制touchmove
• beforeCallback
• afterCallback
• loading
• 分页请求开关pageOpen

Install

npm install vue-mobile-page --save

工作流程

binding指令的时候会去执行一次beforeCallback -> callback -> afterCallback流程。 其他场景——需要手动执行，提供了doCallback(详见method说明)方法

Usage

wrapper 父容器，固定的高度，用来获取scrollTop   wrapper-item 包裹子容器，用来获取高度offsetHeight

<template>
<div
  class="wrapper"
  v-page="{
    wrapperCls: 'wrapper-item',
    callback: getList,
    beforeCallback: beforeGetList,
    afterCallback: afterGetList
  }"
>
  <div class="wrapper-item">
    <div class="demo-item" v-for="item in list">{{item.title}}</div>
  </div>
</div>
</template>

<script>
import page from 'vue-mobile-page'

export default {
  mixins: [ page ],

  methods: {
    getList(pageCb) {
      console.log('currentPage', this.currentPage)
      let currentPageData = []
      // 此回调必须，用来更新分页状态
      pageCb && pageCb(currentPageData)
    },

    beforeGetList() {
      // ...
    },

    afterGetList(isNoData) {
      // ...
    }
  }
}
</script>

参数

内置data

内置method

// 用来重置分页相关参数
resetPage() {
  // ...
}

// 手动执行分页回调
// @params callback {Function} 拉取数据的函数
// @params beforeCallback {Function} 分页前的回调
// @params afterCallback {Function} 分页后的回调
doCallback(callback, beforeCallback, afterCallback) {
  // ...
}