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

2022-01-25 11:30:00 阅读：190 来源： 互联网

标签：pageIndex 分页程序实现 isLoad matList data page 加载

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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