当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

2020年06月23日  | 移动技术网IT编程  | 我要评论

本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考，具体如下：

开发需求

进入页面，加载初始数据，当向上拖动页面至底部，自动加载新的数据，即上拉加载更多数据。

演示

index.wxml

<!-- 数据列表 -->
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
 <view class='title'>{{item.title}}</view>
 <view class='title'>资源id:{{item.id}}</view>
 <image src="{{item.coverimg}}" class='cover'></image>
</view>

<!-- 如果还有更多数据可以加载，则显示玩命加载中 -->
<view class="load-more-wrap">
<block wx:if="{{hasmore}}">
 <view class="load-content">
 <text class="weui-loading"/><text class="loading-text">玩命加载中</text>
 </view>
</block>
<!-- 否则显示没有更多内容了 -->
<block wx:else>
 <view class="load-content">
 <text>没有更多内容了</text>
 </view>
</block>
</view>

index.js

page({
 data: {
 listdata:[], //数据
 moredata: '',
 p:0, //当前分页；默认第一页
 hasmore:true //提示
 },

 //加载初始数据
 onload: function (options) {
 var that = this;

 //初始页面
 var p = that.data.p;
 this.loadmore();
 },

 //触底事件
 onreachbottom:function(){
 var that = this;
 //检查是否还有数据可以加载
 var moredata = that.data.moredata;
 //如果还有，则继续加载
 if (moredata.more != 0) {
  this.loadmore();
  //如果没有了，则停止加载，显示没有更多内容了
 }else{
  that.setdata({
  "hasmore": false
  })
 }
 },

 //发起请求
 loadmore:function(){

 //加载提示
 wx.showloading({
  title: '加载中',
 })

 var that = this;
 //页面累加
 var p = ++that.data.p;

 //请求服务器
 wx.request({
  url: '你的服务器/server.php?page=' + p,
  data: {
  "json": json.stringify({
   "p": p
  })
  },

  method: 'post',
  header: {
  'content-type': 'application/x-www-form-urlencoded'
  },

  //请求成功，回调函数
  success:function(res){
  
  //隐藏加载提示
  wx.hideloading();

  //判断市局是否为空
  if (res.data != 0) {
   that.setdata({
   //把新加载的数据追加到原有的数组
   "listdata": that.data.listdata.concat(res.data), //加载数据
   "moredata": res.data,
   "p":p
   })
  } else {
   that.setdata({
   "hasmore":false
   })
  }
  }
 })
 }
})

说明

1、url修改为你的服务端链接，格式是

http:域名/目录/?page=页码

例如：

http://www.baidu.com/api/data.php?page=1

页码是可变的，所以声明一个变量p，所以就是

`url: 'http://www.baidu.com/api/data.php?page' + p,`

index.wxss

.listitem{
 width: 90%;
 height: 155px;
 background: rgba(0, 0, 0, 0.2);
 margin:10px auto;
 text-align: center;
 position: relative;
 color:#fff;
}

.listitem .cover{
 width:100%;
 height:155px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}

.load-more-wrap .load-content{
 text-align: center;
 margin:30px auto 30px;
 color:#ccc;
 font-size: 15px;
}

服务端返回的数据格式

返回json数组的形式，例如

[
 {"id":"1","title":"标题1","coverimg":"url1"},
 {"id":"2","title":"标题2","coverimg":"url2"},
 {"id":"3","title":"标题3","coverimg":"url3"},
 {"id":"4","title":"标题4","coverimg":"url4"},
 {"id":"5","title":"标题5","coverimg":"url5"}
]

希望本文所述对大家微信小程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网