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

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

开发需求

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

演示

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"}
]

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

(0)

相关推荐

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 微信小程序scroll-view实现横向滚动和上拉加载示例

    今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方. 先看最终效果. 横向滚动 1.设置滚动项display:inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float 为什么会有以上三点要求呢? 其实横向滚动官方文档中是没有做太多说明的,只说明需要定义scroll-view滚动方向scroll-x=true允许横向滚动,但是我在实践的时候我发现,你要横向滚动,首先你得是一排吧.所以才发现需要定义滚动项

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

    本文实例为大家分享了微信小程序上拉加载的具体代码,供大家参考,具体内容如下 demo.wxml  文件 <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{ item.store_name }}</view> <image src='{{item.logo}}'></image> <

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • 微信小程序(六):列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序 下拉刷新及上拉加载原理解析

    这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小

随机推荐

其他