微信小程序实现滚动分页

手机端的话 我们一般不会像PC端那样分页 因为屏幕本身空间就不是很大
所以 一般需求都会选择滚动分页这一解决方案

例如 我在项目根目录 下创建了一个 api文件夹 专门用于调用后台的Api接口
下面创建了一个bookApi.js
然后 其中写了一个getBookList 接收两个参数 当前是第几页 page 一页展示多少条 pageSize
分页查询后端数据
那么 我们前台 Page使用它 就可以
js参考代码如下

import { getBookList } from "../../api/bookApi";
Page({
  data: {
    pageData: {
      page: 1,
      pageSize: 5,
      total: 0
    },
    bookList: [],
		loading: false,
    distance: 0
  },
  onLoad() {
    this.setData({
      pageData: {
        page: 1,
        pageSize: 5,
        total: 0
      }
    })
    this.getUserProfile();
  },
  bindscrolltolower(){
    const { pageData,total } = this.data;
    if((pageData.page * pageData.pageSize) <= total){
      pageData.page += 1;
      this.setData({pageData: pageData})
      this.getUserProfile();
    }else{
      wx.showToast({
        title: '没有更多数据了',
        icon: 'success',
        duration: 2000
      });
    }
  },
  getUserProfile() {
    this.setData({loading: true})
    getBookList(this.data.pageData.page, this.data.pageData.pageSize).then(res=>{
      if(res.state == 200) {
          this.setData({
            bookList: [...this.data.bookList,...res.data.records],
            total: res.data.total,
            loading: false
          })
      }else{
        wx.showToast({
          title: '服务器错误',
          icon: 'success',
          duration: 2000
        });
      }
    }).catch(err => {
      wx.showToast({
        title: '服务器错误',
        icon: 'success',
        duration: 2000
      });
    });
  }
})

这里 我们 引入了 api下的bookApi.js中的getBookList
然后 我们在data中控制了 pageData 存储当前页 页条数 和 数量
为了防止重复请求 我们定义了loading
然后 我们定义getUserProfile 调用getBookList 发送请求
然后在 onLoad 第一个生命周期中 将pageData数据还原一下 然后调用getUserProfile第一次请求

然后 bindscrolltolower 函数在界面上有联动
我们 wxml 参考代码如下

<!--index.wxml-->
<view class="container">
  <scroll-view
    wx:if = "{{ !loading }}"
    scroll-y='true'
    scroll-top = "{{ distance }}"
    style='height: 50vh;'
    bindscrolltolower="bindscrolltolower">
      <view
        wx:for = "{{bookList}}"
        wx:for-index="i"
        wx:for-item="item"
        wx:key = "id"
        class="management"
      >
          {{ item.name }}
      </view>
  </scroll-view>
  <view wx:else>正在加载</view>
</view>

滚动分页 首先 给scroll-view 标签 style控制他的高度 因为 没有高度滚动个什么嘛 是不是
然后我们 用 wx:for 循环变量你bookList 每个节点展示 name 用每个节点的id做元素key
bindscrolltolower可以监听scroll-view滚动到底
然后 就会触发 我们在js中写的bindscrolltolower
然后wxss 参考代码如下

.management{
    width: 100vw;
    height: 40%;
    border-bottom: 1px solid black;
}

然后 我们运行代码

也是没有任何问题