微信小程序 --- 下拉刷新上拉加载
查看文档看到:page()函数注册页面的时候,有 onPullDownRefresh 监听用户下拉动作,onReachBottom 页面上拉触底事件的函数。
在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在page.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;
"enablePullDownRefresh": true,
简单示例:
// 下拉刷新
onPullDownRefresh: function () {
console.log("下拉刷新")
// 显示顶部刷新图标
wx.showNavigationBarLoading();
// // 隐藏导航栏加载框
// wx.hideNavigationBarLoading();
// // 停止下拉动作
// wx.stopPullDownRefresh();
},
// 上拉加载
onReachBottom:function(){
console.log("我在上拉");
},
在一些情况下结合后端:下拉刷新
// 下拉刷新
onPullDownRefresh: function () {
// 显示顶部刷新图标
wx.showNavigationBarLoading();
var that = this;
wx.request({
url: 'https://xxx/?page=0',
method: "GET",
header: {
'content-type': 'application/text'
},
success: function (res) {
that.setData({
moment: res.data.data
});
// 设置数组元素
that.setData({
moment: that.data.moment
});
console.log(that.data.moment);
// 隐藏导航栏加载框
wx.hideNavigationBarLoading();
// 停止下拉动作
wx.stopPullDownRefresh();
}
})
},
上拉加载:
/*
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this;
// 显示加载图标
wx.showLoading({
title: '玩命加载中',
})
// 页数+1
page = page + 1;
wx.request({
url: 'https://xxx/?page=' + page,
method: "GET",
// 请求头部
header: {
'content-type': 'application/text'
},
success: function (res) {
// 回调函数
var moment_list = that.data.moment; for (var i = 0; i < res.data.data.length; i++) {
moment_list.push(res.data.data[i]);
}
// 设置数据
that.setData({
moment: that.data.moment
})
// 隐藏加载框
wx.hideLoading();
}
})
},
到此。
微信小程序 --- 下拉刷新上拉加载的更多相关文章
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- 【微信小程序】scroll-view 的上拉加载和下拉刷新
1.在微信小程序中,想到 下拉刷新 和 上拉加载,如果是整个页面都拖动的话,可以在页面配置中,配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 ...
- 微信小程序开发——列表分页上拉加载封装实现(订单列表为例,订单状态改变后刷新列表滚动位置不变)
业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处 ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- 微信小程序:添加全局的正在加载中图标效果
在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- 微信小程序下拉刷新和上拉加载
小程序知识点二 1.上拉加载和下拉刷新 Wxml文件 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true& ...
随机推荐
- yuv420格式分析
http://blog.csdn.net/liuhongxiangm/article/details/9135791 http://blog.csdn.net/bluesky_sunshine/art ...
- 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版
上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...
- 手机web不同屏幕字体大小高度自适应
body{font-size:0.6rem:} <script> //使用rem策略,不断更新html的fontsize (function(){ function sizeHtm ...
- 常用帝国cms标签收录
帝国网站管理系统V6.6版-数据字典 : http://www.phome.net/doc/manual/extend/html/dbdoc/index.html 帝国模板网:http://www. ...
- mysql数据库中,查看当前支持的字符集有哪些?字符集默认的collation的名字?
需求描述: mysql数据库支持很多字符集,那么如何查看当前的mysql版本中支持的或者说可用的字符集有什么呢? 操作过程: 1.使用show character set的方式获取当前版本中支持的字符 ...
- C#获取CPU处理器核心数量的方法_C#教程
https://yq.aliyun.com/ziliao/89096 摘要: 本文讲的是C#获取CPU处理器核心数量的方法_C#教程, 有几条不同的处理器信息,您可以获得有关的信息:物理处理器数量.核 ...
- JavaScript------字符串与HTML格式相互转换
转载: http://blog.sina.com.cn/s/blog_4cb0b0fc0100aoo1.html 代码:: 1.将字符转换成Html function encodeHtml(str){ ...
- BZOJ 1089 SCOI2003 严格n元树 动态规划+高精度
题目大意:定义一棵深度为d的严格n元树为根的深度为0,最深的节点深度为d,且每一个非叶节点都有恰好n个子节点的树 给定n和d,求深度为d的严格n元树一共同拥有多少种 此题的递推部分并不难 首先我们设深 ...
- POJ 3260 The Fewest Coins(多重背包问题, 找零问题, 二次DP)
Q: 既是多重背包, 还是找零问题, 怎么处理? A: 题意理解有误, 店主支付的硬币没有限制, 不占额度, 所以此题不比 1252 难多少 Description Farmer John has g ...
- Linux buffer/cache异同
buffers与cached 1).异同点 在Linux 操作系统中,当应用程序需要读取文件中的数据时,操作系统先分配一些内存,将数据从磁盘读入到这些内存中,然后再将数据分发给应用程序:当需要往文件中 ...