移动端分页实现

在PC端，我们一般使用点击分页器的页数来实现网络请求重新渲染表格的效果。但是在实现移动端的分页需要先实现触底函数，滑动到页面底部时触发事件。

在uniapp中有一个scroll-view组件，用于实现滑动视图。我们可以在滑动视图上，设置@scrolltolower事件，滑动到视图底部时触发函数。
当然也可以在页面使用uniapp封装的onReachBottom触底函数可以直接使用。
tips：
页面的触底函数和滚动视图的触底函数最好不要同时使用，滑动的时候你不知道触发了哪个。

前端移动端分页查询所需要几个条件：

• page(当前页数)
• limit(一页中显示的数据条数)
• total(总数据量)
• more(是否还有更多数据)

我们先在响应式数据里定义这几个变量

      page: 1, //从第一页开始
      total: 0,
      more: true, //是否还有更多数据

然后在网络请求里使用

    /**
     * 获取当前账号的车辆信息列表
     */
    async fetch() {
      try {
        const res = await myRequest({
          url: "downstream_firm/get_vehicle_list",
          data: {
            xydm: this.loginObj.xydm,
            page: this.page,
            limit: 8,
          },
        })
        if(res.data.status == 200){
          if(res.data.data.list.length <= 8){
            this.more=false
          }
          //将已有的矿产品数组，和当前页的矿产品列表合并成一个新的数组
          this.cartableList = [...this.cartableList,...res.data.data.list]
          this.total=res.data.data.count //更新总数据total的值
        }
      } catch (err) {
        console.log(err);
      }
    },

然后我们在触底函数/滚动视图函数中做判断，判断是否还有数据，并做处理。

  onReachBottom() {
			if(this.total <= this.page*8) return  //如果当前渲染的数据总数，小于或等于总数据量，则代表无数据，跳出函数。
            this.page++ //当前页面+1，加载下一页的数据
			this.more=!this.more //存在数据
			this.fetch() //重新调取网络请求
		}

为了用户方便查看，我们也可以写提示，用来提醒用户当前有无数据。

      <view class="no_data" v-show="more">加载更多...</view>
      <view class="no_data" v-show="!more">--暂无更多数据--</view>