微信小程序使用scroll-view标签实现列表分页功能

最新推荐文章于 2025-12-27 18:53:12 发布

原创最新推荐文章于 2025-12-27 18:53:12 发布 · 3.9k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #javascript #es6

本文详细介绍了如何在微信小程序中使用scroll-view标签配合bindscrolltolower事件创建分页滚动列表，包括wxml结构、js中的数据管理和触底分页函数实现。

微信小程序使用scroll-view标签实现列表分页功能

1,wxml

				//此处定义滚动的主要高度		//方向(向下-y)				//触底函数			
  <scroll-view style="height:780rpx" scroll-y="true" bindscrolltolower="paging">
  						//列表循环			//定义唯一索引
    <view class="list" wx:for="{{list}}" wx:key="index">
   				// 循环内容
    </view>
  </scroll-view>

2,js

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    num: 10, //当前多少页
    page: 0, //现在多少页
    lastPage: 0, //最后一页
  },
	/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getData(1); //默认传入第一页
  },
  
  //获取列表接口----page..接受实参
  getData(page) {
    let data = {
      num: this.data.num, //需要多少条数据
      page, //当前页
    }
    //接口获取
    wxRequest('/**/***/****/****', {}, 'POST', 'loading').then(res => {
    	//判断接口返回是否有值
      if (res.data.data.length) {
      		//判断是否为第一页
        if (page == 1) {
        	//赋值
          this.setData({
            list: res.data.data, //列表数据
            lastPage: res.data.last_page,
            page
          })
        } else {
        	//拼接数据concat
          this.setData({
            list: this.data.list.concat(res.data.data), //拼接列表数据
            page
          })
        }
      } else {
      //否则置空
        this.setData({
          list: [], //置空列表数据
        })
      }
    })
  },
  //触底分页函数
  paging() {
  	//当前页 < 最后页
    if (this.data.page < this.data.lastPage) {
    	//调用列表函数page+1
      this.getData(this.data.page + 1)
    }
  },