小程序实现商品查询分页功能自动加载下一页

界面示意图，可以输入商品名称进行商品搜索，往下滑动的时候滑动到底部自动加载下一页数据，当数据加载完以后，显示暂无更多数据。整体界面采用flex布局

css样式关键部分

page {
  display: flex;
  flex-direction: column;
  position: relative;
}
.goodsWrap {
	flex: 1;
	display: flex;
	overflow-y: auto;
}

视图关键部分

<scroll-view scroll-y='true' class='goodsWrap' bindscrolltolower='scrollFunc'>
  <view class='lisViw'>
    //这里放item
  </view>
  <view class='loadView' wx:if='{{matList==null||matList.length==0||matList.length>10}}'>
    <i-load-more loading="{{isLoad}}" tip="{{isLoad?'加载中':'暂无数据'}}" />
  </view>
</scroll-view>

json文件,这里引入的插件是iview weapp
iView weapp文档

{
  "backgroundTextStyle": "dark",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "i-load-more": "../../dist/load-more/index"
  }
}

js关键部分代码

data: {
    isLoad: false,
    searchVal: "", //搜索值
    matList: [], //当前食材列表
    pageIndex: 0, //当前页码
    pageSize: 10, //每页数量
    pageCount: 0, //总条数,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function(options) {
    this.pageMat(); //加载食材列表
  },
  /**
   * 食材分页查询
   */
  pageMat: function() {
    var page = this;
    page.setData({
      isLoad: true
    });
    let pdata = {
      matName: page.data.searchVal,
      pageIndex: page.data.pageIndex,
      pageSize: page.data.pageSize
    };
    ygPost.postGetSession( '后台接口地址' , pdata, function(ret) {
      if (ret.data.isSuccess) {
        page.data.matList = page.data.matList.concat(ret.data.dataList || []);
        page.setData({
          isLoad: false,
          matList: page.data.matList,
          pageCount: Math.ceil(ret.data.total / ret.data.pageSize)
        })
      } else {
        page.setData({
          isLoad: false
        });
      }
    }, function() {
      page.setData({
        isLoad: false
      });
    });
  },
 /**
   * 滚动到底了 加载数据
   */
  scrollFunc: function() {
    if (this.data.pageIndex < this.data.pageCount - 1) {
      this.setData({
        pageIndex: this.data.pageIndex + 1
      });
      this.pageMat();
    }
  },

标签：pageIndex,分页,程序实现,isLoad,matList,data,page,加载
来源： https://blog.csdn.net/honeycandys/article/details/122681625