微信小程序> 微信小程序下拉刷新/上拉加载更多(上拉加载更多怎么实现)

微信小程序下拉刷新/上拉加载更多(上拉加载更多怎么实现)

浏览量:6425 时间: 来源:武当山道士

参考:微信小程序开发文档-框架逻辑层-注册页面

实现原理:
1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。
2、上拉加载更多(页面上拉触底事件):新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染,小程序在保持原数据显示不变的基础上,自动追加渲染显示新数据。

注意(小程序官方有说明):
1、上拉加载更多 不要用scroll-view,用普通的view即可。
2、下拉刷新需要在 当前页面.json 里配置

 {   "enablePullDownRefresh": true }

3、page()属性里有两个属性是关于页面下拉刷新 和 上拉加载更多的:

 

onPullDownRefresh Function    页面相关事件处理函数–监听用户下拉动作
 onReachBottom  Function    页面上拉触底事件的处理函数

文章列表页的demo代码:

index.wxml

!--pages/home/index.wxml--view class='container' wx:for="{{articles}}"   !-- 文章列表  --   view  bindtap="onArticle"  data-aid="{{item.id}}"      view class='a-title '{{item.title}}/view      image class='a-thumb' src="{{item.thumb}}" mode="widthFix"/image    /view/view

index.js

//pages/home/index.jsvar page=0;//分页标识,第几次下拉,用户传给后台获取新的下拉数据Page({   data: {        articles: [],//文章列表数组   },   // 页面加载   onLoad: function () {      this.clearCache();//清本页缓存      this.getArticles(0);//第一次加载数据   },   // 下拉刷新   onPullDownRefresh: function () {     this.clearCache();     this.getArticles(0);//第一次加载数据   },   // 页面上拉触底事件(上拉加载更多)   onReachBottom: function () {      this.getArticles(page);//后台获取新数据并追加渲染   },   // 清缓存   clearCache:function(){      page = 0;//分页标识归零      this.setData({         articles: [] //文章列表数组清空      });    },   /**************** 界面点击 *****************/    // 文章点击跳转详情页   onArticle:function(){      //业务逻辑   },   /**************** 网络请求 *****************/     /**    * 获取文章列表    * @param {int} pg  分页标识 默认0    */   getArticles: function (pg) {      //设置默认值      pg = pg ? pg : 0;      var that = this;      var apiUrl = 'http://www.zhipur.com/Api/Article/getArticles';//文章列表接口地址      var postData = {         page: pg,//分页标识         app_version: 1.2,//当前版本,后台根据版本不同给出不同的数据格式      }      wx.request({         url: apiUrl,         data: postData,         method: 'POST',         header: { 'content-type': 'application/x-www-form-urlencoded' },         success: function (res) {             if (res.data.status == 1) {//成功               var tmpArr = that.data.articles;               // 这一步实现了上拉加载更多               tmpArr.push.apply(tmpArr,res.data.data);               that.setData({                  articles: tmpArr               })               page++;            } else {//失败               console.log(res.data.info);            }         },         fail: function (e) {            console.log(e);         }      })           },})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎