600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 微信小程序 下拉刷新/上拉加载更多 (上拉加载更多怎么实现)

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

时间:2021-10-27 13:16:15

相关推荐

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

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

实现原理:

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 = '/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);}}) },})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。