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

本文主要是介绍小程序实现商品查询分页功能自动加载下一页，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

界面示意图，可以输入商品名称进行商品搜索，往下滑动的时候滑动到底部自动加载下一页数据，当数据加载完以后，显示暂无更多数据。整体界面采用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();
    }
  },

这篇关于小程序实现商品查询分页功能自动加载下一页的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！