微信小程序 - ListView3 - 分页加载

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

js 代码：

var index = 0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataArr: []
  },

  requestData: function (isLoadMore) {

    if (isLoadMore){
      index++;
    }else{
      index=0;
    }

    wx.showLoading({
      title: '加载中',
    })
    
    wx.request({
      url: 'api地址',
      method: 'post',
      data: {
        page: index
      },
      success: (res) => {
        wx.hideLoading();
        wx.stopPullDownRefresh();
        // console.log(res.data);

        if (!res.data.data.length){
          wx.showToast({
            title: '暂无更多数据',
            icon: 'none',
            duration: 2000
          })
          return;
        }

        this.setData({
          dataArr: this.data.dataArr.concat(res.data.data) 
        })
      },
      Error: (Error) => {
        wx.hideLoading();
        wx.stopPullDownRefresh();
        console.log(Error);
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    wx.setNavigationBarTitle({
      title: '分页加载'
    })

    this.requestData();

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

    this.requestData();

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.requestData(true);
  },


})

json 代码：

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "usingComponents": {}
}

wxml 代码：

<view class="cell-bg" wx:for="{{dataArr}}" wx:key="index">

  <view class="left-view">
    <image class="img" src="https://img.yzcdn.cn/vant/cat.jpeg"> </image>
  </view>

  <view class="right-view">
    <view class="name">{{item.name2}}</view>
    <view class="content">{{item.content}}</view>
  </view>

</view>

wxss 代码：

.cell-bg {
  display: flex;
  width: 100%;
  /* height: 140rpx; */
  background-color: white;
  border-bottom: 1px solid rgb(230, 230, 230);
}

.left-view {
  /* background-color: blue; */
  width: 140rpx;
  /* 子控件 水平居中 */
  text-align: center;
  /* 子控件垂直居中 */
  line-height: 140rpx;
}

.img {
  width: 100rpx;
  height: 100rpx;
  vertical-align: middle;
}

.right-view {
  /* background-color: red; */
  flex: 1;
}

.name {
  margin-top: 20rpx;
  margin-left: 15rpx;
  font-size: 35rpx;
}

.content {
  margin-top: 15rpx;
  margin-left: 15rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  color: gray;
  font-size: 30rpx;

}