微信小程序实现上拉加载功能

前端之家收集整理的这篇文章主要介绍了微信小程序实现上拉加载功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享微信小程序上拉加载的具体代码,供大家参考,具体内容如下

demo.wxml  文件

  1. <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
  2. <view class='title'>{{ item.store_name }}</view>
  3. <image src='{{item.logo}}'></image>
  4. </view>
  5.  
  6. <view class="load-more-wrap">
  7. <block wx:if="{{hasMore}}">
  8. <view class="load-content">
  9. <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
  10. </view>
  11. </block>
  12. <block wx:else>
  13. <view class="load-content">
  14. <text>没有更多内容</text>
  15. </view>
  16. </block>
  17. </view>

demo.js文件

  1. Page({
  2. data: {
  3. listdata:[],//数据
  4. paginated: '',//{total:"12",count: 10,more: 1} total数据总数,count:当前分页数据数据,more:1表示还有,0表示无数据
  5. p:0,//当前分页;默认第一页
  6. hasMore:true //提示
  7. },onLoad: function (options) {
  8. var that = this;
  9. var p = that.data.p;
  10. this.loadmore();
  11. },onReachBottom:function(){
  12. var that = this;
  13. var paginated = that.data.paginated;
  14. if (paginated.more != 0) {
  15. this.loadmore();
  16. }else{
  17. that.setData({
  18. "hasMore": false
  19. })
  20. }
  21. },loadmore:function(){
  22. wx.showToast({
  23. title: "玩命加载中",icon: 'loading',duration: 1000
  24. })
  25. var that = this;
  26. var p = ++that.data.p;
  27. wx.request({
  28. url: 'xxx',data: {
  29. "json": JSON.stringify({
  30. "demo": "xxx","p": p
  31. })
  32. },method: 'POST',header: {
  33. 'content-type': 'application/x-www-form-urlencoded'
  34. },success:function(res){
  35. if (res.data.data != 0) {
  36. that.setData({
  37. "listdata": that.data.listdata.concat(res.data.data),//加载数据
  38. "paginated": res.data.paginated,more: 1} 此处主要用于上拉加载是否加载数据
  39. "p":p
  40. })
  41. } else {
  42. that.setData({
  43. "hasMore":false
  44. })
  45. }
  46. }
  47. })
  48. }
  49. })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章