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

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

实现原理：
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.js
var 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);}})        },})

微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）相关推荐

html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序下拉刷新问题
微信小程序下拉刷新问题我们主要来说一下微信小程序的下拉刷新问题,这个问题也是我自己碰见的问题,问题比较二,但是又很恶心,所以在这里给大家分享一下,有这个问题朋友,赶紧从死胡 ...
微信小程序--下拉刷新
实现微信小程序下拉刷新步骤一 json文件配置(若需要全局配置,则在app.json 反正就配置本界面得到json即可) {"enablePullDownRefresh": tr ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序下拉不触发onPullDownRefresh
微信小程序下拉onpulldownrefresh不触发简单记录下微信小程序下拉不触发方法的问题 1.下拉出发需要在app.json中配置下拉的内容 "window": {&quo ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...

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

微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）相关推荐

最新文章

热门文章

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

微信小程序 下拉刷新/上拉加载更多 （上拉加载更多怎么实现）相关推荐

最新文章

热门文章

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

微信小程序下拉刷新/上拉加载更多（上拉加载更多怎么实现）相关推荐