微信小程序分页

最新推荐文章于 2023-05-11 09:14:12 发布

xiaoma121212

最新推荐文章于 2023-05-11 09:14:12 发布

阅读量2.1k

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/xiaoma19941027/article/details/107333249

版权

本文详细介绍了如何在微信小程序中实现分页功能，通过wxml和.js的配合，实现数据的动态加载和页面的流畅切换，提升用户体验。

摘要由CSDN通过智能技术生成

wxml:

<view>
  <goods-card goodsList="{
  {goodsList}}" />
  <view class="cu-load bg-gray {
  {loadmore?'loading':'over'}}"></view>
</view>

在这里插入图片描述
.js

Page({
  data: {
    page: {
      current: 1,
      size: 10
    },
    loadmore: true,
    goodsList: []
  },
  onLoad() {
    app.initPage()
      .then(res => {
        this.loadData()
      })
  },
  loadData(){
    this.goodsPage()
  },
  goodsPage(e) {
    app.api.goodsPage(this.data.page)
      .then(res => {
        let goodsList = res.data.records
        this.setData({
          goodsList: [...this.data.goodsList, ...goodsList]
        })
        if (goodsList.length < this.data.page.size) {//如果请求到的数组长度小于size说明数据已经全部请求完毕，loadmore重置为false,底部显示没有更多了
          this.set