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

最新推荐文章于 2022-02-17 18:10:04 发布

chengtuo8307

最新推荐文章于 2022-02-17 18:10:04 发布

阅读量64

点赞数

原文链接：https://my.oschina.net/u/3705292/blog/1581331

版权

首先是网上找的一个加载更多的模板，代码如下：

<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
         });
      }
      }
   }
})
  }
});

效果如下：

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