分页

使用方式

在 script 中使引入pagination.js

import pagination from '@/common/mixin/pagination.js';
export default { 
   mixins:[pagination],
  data() {
            return {
                getUrl: '/api/article/lists', // 需要分页的接口地址
        autoLoad: true
            }
        },
}

当分页接口，需要传其它参数，请将autoLoad: false, 然后手动调用 this.getListInit()
this.getListInit 方法等于重新初始化list 数据

在 template 中使用

分页功能要在page 上加这个事件 @scrolltolower=”Scrolltolower”

<template>
    <view>
          <page title="页面标题" @scrolltolower="Scrolltolower">
          <empty v-if="list.length === 0 && loaded"></empty>
          <view class="loading ptb30" v-if="!loaded"></view>
          <view v-for="(item,index) in list" :key="index">
           {{item.title}}
          </view>
           <loading-more nomore-text="我是有底线的" :nomore="nomore" :list="list"></loading-more>
        </page>
    </view>
</template>

使用qui-list分页组件

<template>
    <view>
          <page title="页面标题" @scrolltolower="loadMore('qlist')">
          <qui-list :otherParams="otherParams" :autoLoad="true" ref="qlist" getUrl="/api/UserAddress/list" v-slot="data">
            <!--这里循环的内容-->
            <view v-for="(item, index) in data.list">{{index}}</view>
          </qui-list>
        </page>
    </view>
</template>
<script>
export default {
  data() {
    return {
      otherParams: {},
    }
  }
}
</script>