-
微信小程序下拉刷新/上拉加载更多
2017-12-19 09:37:50在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效; 看一下json文件 ..."enablePullDownRefresh": true, ...查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,
在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;
看一下json文件
"enablePullDownRefresh": true,
注意这里的true是布尔型而不是字符;有同学说设置完之后可以下拉,但是看不到图标;
在app.json中这样设置;
这样下拉之后就可以看到了;
每个页面生成的时候已经默认为我们设置了前面提到的onPullDownRefresh函数和onReachBottom函数
直接上代码:
page为全局变量,用在在后面的加载请求,这里要和编写数据接口的同事讨论好请求;
// 下拉刷新 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 }); 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; const oldData = that.data.moment; that.setData({ moment:oldData.concat(res.data.data) }) // 隐藏加载框 wx.hideLoading(); } }) },
完成。
推荐一下自己的小程序 有兴趣可以交流
-
vue vant框架上拉加载效果 list列表上拉加载重复加载问题
2020-05-21 17:16:47vue vant框架上拉加载效果,list列表上拉加载重复加载问题。 如果上拉一次出现了加载几次的情况: 一、注意this.loading=false;设置是否正确; 二、每次加载的数据条数给多一点。 //html <van-list v-model=...vue vant框架上拉加载效果,list列表上拉加载重复加载问题。
如果上拉一次出现了加载几次的情况:
一、注意this.loading=false;设置是否正确;
二、每次加载的数据条数给多一点。//html <van-list v-model="loading" :finished="finished" finished-text="没有更多了" error-text="请求失败,点击重新加载" @load="onLoad" :immediate-check="false" > </van-list> //methods onLoad() { //加个延迟可以短暂看到加载中,体验好一点, 不然太快了有点感觉不到是上拉加载 //这里不能写this.loading=false;不然每一次下拉会重复加载 setTimeout(() => { this.home_info_pay(); }, 1000); }, home_info_pay(){ var self = this; axios({ method:'get', url:'/api/home/index/index_paylist', params:{ 'start':self.start,//第几次加载传到后台,让后台知道从哪一条数据开始 }, headers:{ 'XX-Token':ses.login } }).then(function(res){ console.log(res); if (res.data.code==1) { if(res.data.data.length==0){ self.finished = true; return false; } for(var i in res.data.data){ self.homeinfo.payData.push(res.data.data[i]); } self.start +=1; console.log(self.start); self.loading=false; //加载完成才设置false,让其可以执行下一次加载 }else{ vant.Dialog({message: res.data.msg}); } }); },
-
AngularJS进阶(三十八)上拉加载问题解决方法
2016-05-23 09:32:08AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据。...AngularJS上拉加载问题解决方法
项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据。但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果。
图1 客户端搜索栏
图2 服务端控制台
可以断定是客户端的业务逻辑出现了问题。返回到客户端,查看源码逻辑,修改如下:
控制器
$scope.medsearchMore = function() { console.log("上拉加载....." + isfinished); if (isfinished == 0) { begno += pcnt; var data = { "begno" : begno, // 起始序号 "pagenum" : pagenum, // 每页返回条数 "searchby": searchby }; if (searchType == 1) { data.classid = searchKey; console.log(data.classid); //--------1 appCallServer($http, "9002", data, function(data) { console.log("下拉刷新查询结果rootScope.med:" + JSON.stringify(data.data)); for (var i = 0; i < data.pcnt; i++) { $rootScope.med.push(data.data[i]); } // 更新状态 isfinished = data.isfinished; // 药品已查询完毕 if(isfinished == '1'){ $scope.noMore = true; }else{ $scope.noMore = false; } pcnt = data.pcnt; }, function(data) { // 药品已查询完毕 $scope.noMore = true; $ionicLoading.show({ template: data.errtext }); $timeout(function() { $ionicLoading.hide(); }, 1200); }); } } else { // 药品已查询完毕 $scope.noMore = true; } $timeout(function() { $scope.$broadcast('scroll.infiniteScrollComplete'); }, 1200); };
视图
<!--当用户到达页脚或页脚附近时,ion-infinite-scroll指令允许你调用一个函数 。当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite--> <!--当没有更多数据加载时,就可以用一个简单的方法阻止无限滚动,那就是angular的ng-if指令--> <!--设置noMore初始值为true首次即点击分类查询时不进行下拉加载操作--> <ion-infinite-scroll on-infinite="medsearchMore()" distance="0.01%" icon="ion-loading-c"></ion-infinite-scroll> <div class="item" ng-if="noMore" align="center"><p>没有更多的药品了</p></div>
经过以上修改,可以实现避免不必要的请求。
参考文献
1.http://www.ionic.wang/js_doc-index-id-29.html
美文美图
-
解决mui关闭上拉加载后,又重新开启上拉加载后,会自动执行一次上拉加载的问题
2018-10-10 16:49:00执行这句会显示没有更多的数据并关闭数据上拉加载的功能. 在自己的需求中需要在下拉刷新后, 将没有更多数据的显示去掉并同时开启上拉加载的功能. 看了很多官网上的例子,然而并没有用. 具体可以在上拉刷新后的...mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); 执行这句会显示没有更多的数据并关闭数据上拉加载的功能.
在自己的需求中需要在下拉刷新后, 将没有更多数据的显示去掉并同时开启上拉加载的功能.
看了很多官网上的例子,然而并没有用.
具体可以在上拉刷新后的最后 加入如下代码:
mui('#pullrefresh').pullRefresh().disablePullupToRefresh(); // 关闭显示更多的提示 setTimeout(function () { mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); mui('#pullrefresh').pullRefresh().endPullupToRefresh(); }, 1000) //设置1s后执行(需要大于1s)不然就会自动执行一次加载.
-
RecyclerView下拉刷新上拉加载
2016-03-07 23:12:21RecyclerView下拉刷新上拉加载 -
vue上拉加载
2017-10-17 17:14:57vue上拉加载 -
实现 RecyclerView 上拉加载及自动加载
2017-12-09 12:58:13之前在《一步步打造自己的通用上拉加载布局》(如果没有看过,建议先看下这一篇)写到如何实现一个通用的上拉加载布局,本文将基于此进行扩展,实现 RecyclerView 的上拉加载及自动加载。在之前的《一步步打造自己的... -
SmartRefreshLayout上拉加载加载网络请求数据
2017-10-19 01:14:54SmartRefreshLayout上拉加载加载网络请求数据后调用封装好的那个方法可以让右边的滑动不重置状态啊 ,我 现在就是每次滑到底部进行上拉加载那个滑动条都会跑到顶部求大神解决 -
仿淘宝上拉加载更多
2015-06-04 10:13:47仿淘宝上拉加载更多,仿淘宝上拉加载更多,仿淘宝上拉加载更多 -
微信小程序 上拉加载配置,上拉加载设置不生效问题
2020-09-08 18:45:20一、上拉加载配置 1:json文件配置 "onReachBottomDistance":50 { "usingComponents": {}, "navigationBarTitleText": "考勤记录", "enablePullDownRefresh": true, "onReachBottomDistance": 50 } 2:js... -
MUI上拉加载
2019-08-05 11:58:37mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下: 1、页面滚动到底,显示“正在加载...”提示(mui框架提供) 2、执行加载业务数据逻辑(开发者提供) 3、加载完毕,隐藏"正在加载"... -
ListView上拉加载
2016-07-31 23:36:33ListView上拉加载 -
通用版下拉刷新上拉加载大合集demo 源码
2014-08-27 14:41:33对所有View通用的下拉刷新上拉加载控件demo大合集。 与此资源对应的博客地址: http://blog.csdn.net/zhongkejingwang/article/details/38868463 -
ionic上拉加载
2017-12-14 11:33:20ionic上拉加载-爬坑之路 Vue功夫都还不够就又开始学习Ionic了,工作任务也没其他办法了。工作了将近一年,慢慢的领悟到,理解一门技术(语言)的思想,有优秀的逻辑思维比认识一门技术(语言)重要的太多太多。思想... -
uniapp如何实现上拉加载(uniapp懒加载)?其实简简单单
2020-08-24 10:19:48uniapp如何实现上拉加载(uniapp懒加载),其实简简单单 不管是微信小程序,app上拉加载功能我感觉用的都是很多的,尤其是电商项目。 文章目录uniapp如何实现上拉加载(uniapp懒加载),其实简简单单第一步开启上拉... -
RecyclerView侧滑菜单,滑动删除,长按拖拽,下拉刷新上拉加载
2016-08-04 06:56:18RecyclerView侧滑菜单,RecyclerView滑动删除,RecyclerView长按拖拽,RecyclerView下拉刷新上拉加载 版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 RecyclerView侧滑菜单,... -
IOS上拉刷新及自动加载更多,不需要上拉加载更多,
2015-04-30 00:11:46IOS上拉刷新及自动加载更多,不需要上拉加载更多,直接就翻到下面就自动加载更多! 喜欢的话到我博客留个言吧,感谢:http://blog.csdn.net/xiaoyuan511 新手,大神勿喷。求共同进步! -
SwipeRefreshLayout上拉加载
2016-04-20 11:42:22这个组件只支持下拉刷新,不支持上拉加载更多的操作,现在我们就来实现它的上拉加载操作。 参考原文地址:http://blog.csdn.net/bboyfeiyu/article/details/39935329?utm_source=tuicool&utm_medium=referral 大家... -
mui 上拉加载 实现分页加载功能
2020-08-05 13:46:29mui 上拉加载 实现分页加载功能 分页功能(上拉加载): 1、引入需要的css、js文件 <link href="static/css/mui.css" rel="stylesheet" /> <!-- js --> <script src="static/js/jquery-3.2.0.... -
小程序demo--上拉加载
2017-03-08 10:39:13小程序demo--上拉加载 -
手把手教你实现RecyclerView的下拉刷新和上拉加载更多
2017-10-12 09:11:26纵观多数App,下拉刷新和上拉加载更多是很常见的功能,但是谷歌官方只有一个SwipeRefreshLayout 用来下拉刷新,上拉加载更多还要自己做。 基于RecyclerView 简单封装了这两个操作,下拉刷新支持LinearLayoutManager... -
uniapp,上拉加载
2019-12-24 15:07:04今天上拉加载解决方法他来了“一张图搞定它”!!! -
小程序上拉加载功能
2020-05-29 00:41:29小程序上拉加载功能 随着手指向上拉动不断加载更多的数据这种做法在现在的移动端很常见,这种就是接下来要做的上拉加载。这样做可以加快加载速度,按需加载,不用一上来就把所有的数据都请求过来。 做上拉加载之前先... -
微信小程序 下拉刷新/上拉加载更多 (上拉加载更多怎么实现)
2018-05-23 10:10:07参考:微信小程序开发文档-&amp;gt;框架&amp;gt;逻辑层-&...1、下拉刷新:由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现...注意(小程序官方有说明):上拉加载更... -
apiCloud 上拉加载
2018-01-23 09:33:00api.addEventListener({ name:'scrolltobottom', extra:{threshold:0} }, function(ret, err){ //上拉加载时需要加载的数据 }); 转载于:https://www.cnblogs.com/gq... -
自定义RecyclerView的上拉加载功能,单纯的上拉加载,适应性强
2017-06-13 17:12:02RecyclerView的上拉加载功能 自己写了一个单纯的上拉加载功能,适应性好。希望大家多给意见,如有bug及时反馈留言。 核心用法: 1. xmlns:tools="http://schemas.android.co -
ListView的下拉刷新与上拉加载
2014-10-10 17:09:33这个Demo实现了ListView的下拉刷新与上拉加载这两个功能,功能基本完善,可以在项目中引用,关于这个自定义的组件,详细请参见:http://blog.csdn.net/allen315410/article/details/39965327 -
uniapp局部上拉加载数据
2020-12-16 17:18:44一、页面局部实现上拉加载数据 只有评论区可以上拉加载数据,网上找到了 vue-infinite-scroll 二、使用 官方示例 1、 npm 加载依赖 npm install vue-infinite-scroll --save 2、 单个页面引用 import infinite... -
微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)
2018-01-04 11:21:25利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:...
-
C++学习(一九零)libc++与 libstdc++
-
个人总结的408往年题目知识点分布
-
JavaEE框架(Maven+SSM)全程实战开发教程(源码+讲义)
-
单片机完全学习课程全五季套餐
-
深入理解php底层:php生命周期
-
Redis数据库入门与使用
-
Arrays分类算法-First Duplicate Value
-
three.js入门速成
-
微服务系列第七十一季-Spring入门
-
【数据分析实战训练营】Hive详解
-
【数据分析-随到随学】量化交易策略模型
-
C/C++编程全家桶(Daozy极限编程)
-
AZ-900 -2021年1月最新.pdf
-
2020牛客暑期多校集训营第六场题解.pdf
-
matlab产生正弦波及.mif文件的程序-其它文档类资源
-
nginx上传文件失败,提示上传文件过大,怎么解决
-
朱有鹏老师嵌入式linux核心课程2期介绍
-
彻底学会正则表达式
-
阿里云云计算ACP考试必备教程
-
第九章 Caché 变量大全 $KEY 变量