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

本文通过实例讲解如何在钉钉小程序中实现下拉加载更多功能,同样适用于微信和其他小程序,通过替换官方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>

js

 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);
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值