首页 > 编程知识 正文

微信下拉小程序游戏怎么关闭,微信小程序上拉刷新

时间:2023-05-03 20:02:12 阅读:267031 作者:3085

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

实现原理:
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); } }) },})飞艇稳赚不赔的打法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); } }) },})

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。