小程序——下拉加载列表例子

最新推荐文章于 2025-05-02 10:26:54 发布

一个拉G的前端

最新推荐文章于 2025-05-02 10:26:54 发布

阅读量477

点赞数

CC 4.0 BY-SA版权

文章标签：小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/fdadfas/article/details/128623837

本文通过实例讲解如何在钉钉小程序中实现下拉加载更多功能，同样适用于微信和其他小程序，通过替换官方API实现自定义操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我所使用的是钉钉的小程序微信或者其他的小程序也能安装这个思路来替换官方提供的api就行
hrml

<view>
  <view class="myscroll-wrap">
    <view class="item" a:for="{{list}}">{{index+1}} 第{{pageIndex}}页</view>
    <view class="loading" a:if="{{loading}}">正在加载中...</view>
  </view>
</view>

 data: {
    list:[], // 列表数据
    pageIndex: 0, //页码
    pageNum: 10,  //每页多少条
    totalPage: 5, //总页数
    loading: false, // 加载动画
  },
    onLoad() {
    this.getdata();
  },
  onReachBottom() {
    // 页面被拉到底部
    console.log('页面被拉到底部: ');
    console.log(this.data.pageIndex);
    if(this.data.pageIndex > this.data.totalPage){
      console.log('加载完毕');
      this.setData({loading: false});
      return
    }
    this.getdata();
  },
  async getdata(pageIndex){
    if(this.data.isPullDownRefresh){
      this.setData({
        pageIndex: 1,
        list: []
      }) 
    }
    console.log('获取数据: ');
    console.log('this.data.pageIndex: ', this.data.pageIndex);
    this.setData({loading: true});
    let list = this.data.list;
    for(let i=1; i<11;i++){
      list.push(i);
    }
    setTimeout(() => {
      this.setData({
        list,
        pageIndex: (this.data.pageIndex)+1,
        loading: false,
        isPullDownRefresh: false
      })  
      my.stopPullDownRefresh()
    }, 3000);
  }