vue-mobile-page

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

Feature

• [x] 节流函数throttle控制touchmove
• [x] beforeCallback
• [x] afterCallback
• [x] loading
• [x] 分页请求开关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>

参数

参数名|描述|默认值 ---|---|--- loadFirst|首次是否自动加载|true childWrapperCls|子容器类名，用来校验Dom结构的合理性|'' callback|分页回调|'' beforeCallback|分页前的回调，例如可以用来控制请求开关|'' afterCallback|分页后的回调，接受一个参数noData，同上|'' loadingOpen|是否开启默认的loading效果|true throttleTime|截流waitTime|500ms

内置data

参数名|描述|默认值 ---|---|--- currentPage|''|1 pageSize|''|20 noData|是否没有更多数据了|false pageOpen|分页请求的开关，一般用在beforeCallback函数中|true pageLoading|分页是否正在请求|false loadingEl|请求loading的Dom节点|null

内置method

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

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