小程序初学者分享第一弹：上拉加载更多数据

首先是网上找的一个加载更多的模板，代码如下：
<!--加载更多 模版-->
<template name="loading">
    <view class="weui-loadmore">
        <view class="weui-loading"></view>
        <view class="weui-loadmore__tips">正在加载</view>
    </view>
</template>

<template name="nodata">
    <view class="weui-loadmore">
        <view class="weui-loadmore__tips" style="color:#888">没有数据了</view>
    </view>
</template> 


然后是在页面加载模板，代码如下：
<!--引入加载更多模版-->
<import src="../../template/loading" />

<view class="container">
   <block wx:for="{{articleList}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
    <view class="feed-item flex-wrp" data-aid="{{item.id}}" bindtap="bindDetailTap">
      <view class="feed-content flex-column">
        <view class="article">
          <text>{{item.title}}</text>
        </view>
        <view class="answer-body">
          <view>
            <view class="like dot">
              <a>{{item.favouriteNum}} 收藏 </a>
            </view>
            <view class="comments dot">
              <a>{{item.commentNum}} 评论</a>
            </view>
            <view class="comments dot">
              <a>{{item.timeDifference}} </a>
            </view>
          </view>
        </view>
      </view>
      <view class="new-article">
        <image src="../../images/{{item.typeImage}}"></image>
      </view>
    </view>
  </block>

  <!--加载更多模版-->
  <block wx:if="{{isLoading}}">
    <template is="loading" />
  </block>
  <block wx:else>
    <template is="nodata" />
  </block>
</view>


js文件如下，我用的是服务器数据，所以想要测试的可以修改为自己本地数据
var app = getApp()
const getNewArticleListUrl = require('../../config').service.getNewArticleListUrl

Page({
  data: {
    currentTab: 0, //预设当前项的值
    articleList: [],
    isLoading: true,//是否显示加载数据提示
    totalPage: '',    // 总页数
    currentPage: 1  // 当前页数  默认是1
  },
  onLoad: function () {
    var that = this
    //调用应用实例的方法获取全局数据
    that.getData();
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  //上拉加载
  onReachBottom: function () {
    var that = this;
    console.log("onReachBottom")
    if (that.data.currentPage < that.data.totalPage) {
      ++that.data.currentPage;
      that.getData();
    } else {
      that.setData({
        isLoading: false
      })
    }
  },
  // 下拉刷新回调接口
  onPullDownRefresh: function () {
    // 在标题栏中显示加载
    wx.showNavigationBarLoading() 
    // 设置页面重新为第一页，将页面数据清空
    this.setData({
      currentPage: 1,
      articleList: []
    })
    // 网络请求，重新请求一遍数据
    this.getData();
    wx.hideNavigationBarLoading() //完成停止加载
    // 小程序提供的api，通知页面停止下拉刷新效果
    wx.stopPullDownRefresh;
  },
  bindDetailTap: function (e) {
    var articleId = e.currentTarget.dataset.aid;
    wx.navigateTo({
      url: '../article-detail/article-detail?articleId=' + articleId
    })
  },
  // 获取数据 
  getData: function () {
    var that = this;
    var pageIndex = that.data.currentPage;
    wx.request({
      url: getNewArticleListUrl,
      data: {
        order: 'desc',
        sort: 'create_time',
        limit: 7,
        current: pageIndex
      },
      success: function (res) {
        var dataModel = res.data;
        var tempArray = that.data.articleList;
        if (dataModel.code == 1) {
          if (dataModel.data.list.length != 0) {
            tempArray = tempArray.concat(dataModel.data.list);
            that.setData({
              totalPage: dataModel.data.totalPage,
              articleList: tempArray
            });
          }
          if (dataModel.data.totalPage == 1) {
            that.setData({
              isLoading: false
            });
          }
        }
      }
    })
  }
});

效果如下：

 

关注我的公众号一起讨论技术问题，谢谢支持。

 

转载于:https://my.oschina.net/u/3705292/blog/1581331