apicloud如何实现优雅的下拉刷新与加载更多
apicloud中提供下拉刷新监听事件api，也提供滚动到底部事件的监听，能够实现下拉刷新和滚动到底部加载更多功能，但是我们真的就满足实现功能了吗？将两个代码拼凑起来运行看看发现了什么？是的，在滚动到底部加载更多的时候底部会弹动，有人可能会说触发加载更多的时候直接放一个遮罩view，也就是progress，用来禁止用户继续对当前view产生触摸事件就行，但是如果你很快滑动到底部呢，弹动现象仍然不能禁止。我曾向技术多次提过在下拉刷新api中提供一个参数用来控制是否禁用底部弹动的，但是前几次技术都是不了了之，最近又问了一次，直接回应“目前市面上有APP是这种效果吗？底部弹动，主要是拟物，跟手，你不喜欢这种效果，不代表每个人都不喜欢。”，我只想说，我又没叫你去掉弹动，只是加一个属性控制是否弹动，这和别人是否喜欢有什么关系，而且尽然还说现在市场的app有这种效果吗？可能我已经脱离了市场轨道。好了，发发牢骚而已，这里不谈技术人员的态度问题，下面分享下我如何实现优雅控制的：
对于这个问题我想过很多种办法，原本想是否改写官方底层来实现，但是尝试了一下放弃了（好吧，我承认是我太水，没改的了），因为就算我把Android改了，那IOS呢，apicloud引擎又没有开源，IOS同样无法实现，那又有什么意义，我想应该有很多人都纠结这个问题，那么到底怎么解决呢？
首先apicloud提供了设置页面bounces的方法，能否从这方面下手，动态改变其bounces状态，在具有下拉意图的时候开启bounces,在具有上拉加载更多意图的时候禁用bounces。但是如何判断意图呢，最初的设想是监听scrolltobottom方法来控制，放滚动到距离底部还有50dp的时候来禁用bounces，在距离顶部50dp（通过计算成距离底部距离）的时候开启bounces，但是发现scrolltobottom有些问题：1、只能监听一个，不能任性的监听，后面的会覆盖前面的。2、滚动到距离底部50dp的时候触发事件，但是滚动到距底部0dp的时候再向下滚任然会触发该事件，这应该是一个bug。原生api使用不了，那js是否提供方法呢，都知道我们的开始使用的是webview，虽然Java可以直接调用webview的原生方法，但是js也可以操作webkit的事件，其中就有onscroll事件，这个是网页滚动的事件。能否通过这个方法来改变bounces呢，试验了一下，还真可以，总体方法就是在使用原生下拉刷新与scrolltobottom监听滚动到底部的同时，使用js监听页面滚动事件，在滚动条距离顶部30像素位置上下分别改变bounces状态。
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>邂逅</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
<style type="text/css">
.aui-list-item.wechat-top {
background-color: #f3f3f7;
}
.aui-list .wechat-avatar {
width: 3rem;
}
.wechat-avatar .aui-row-padded {
background-color: #dddee0;
padding: 0.1 rem;
border-radius: 0.2 rem;
margin-left: -0.05 rem;
margin-right: -0.05 rem;
}
.wechat-avatar .aui-row-padded {
padding: 0.05 rem;
}
.wechat-avatar, .wechat-avatar > img {
border-radius: 0.2 rem;
}
</style>
</head>
<body>
<div class="aui-content aui-margin-b-15" id="aui-content">
<ul class="aui-list aui-media-list">
<li class="aui-list-item aui-list-item-middle" v-for="item in itemList">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media wechat-avatar">
<img :src="[item.HeadIcon]" />
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">
{{item.NickName}}
</div>
<div class="aui-list-item-right">
{{item.ResidenceCity}}
</div>
</div>
<div class="aui-list-item-text aui-font-size-12">
愿得一人心，白首不分离
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript">
var bounce = true, self = this;
var pageNum = 1, pageSize = 10;
var vm = new Vue({
el : ".aui-content",
data : {
itemList : [],
count : 0,
pageEnd : false
}
});
apiready = function() {
var minHeight = api.frameHeight + 30;
var div = $api.byId('aui-content');
div.style.cssText="min-height:"+minHeight+"px";
api.setRefreshHeaderInfo({
loadingImg : 'widget://image/refresh.png',
bgColor : '#ccc',
textColor : '#fff',
textDown : '下拉刷新...',
textUp : '松开刷新...'
}, function(ret, err) {
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
reloadList();
setTimeout('api.refreshHeaderLoadDone()', '500');
});
api.addEventListener({
name : 'scrolltobottom',
extra : {
threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err) {
if (vm.pageEnd) {
api.toast({
msg : '没有更多数据了'
})
} else {
getList();
}
});
reloadList();
window.addEventListener("scroll", function() {
var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t <= 30) {
if (!bounce) {
api.setFrameAttr({
name : 'search_frm',
bounces : true,
});
bounce = true;
}
} else {
if (bounce) {
api.setFrameAttr({
name : 'search_frm',
bounces : false,
});
bounce = false;
}
}
});
};
function getList() {
api.showProgress({
title : '努力加载中...',
text : '请稍后...',
modal : false
});
api.ajax({
url : host + "/api/User/AllUserList?pageNum=" + pageNum + "&pageSize=" + pageSize,
method : "get"
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
if (!ret.res.data.list) {
api.toast({
msg : '没有更多数据了'
})
} else {
if (ret.res.data.count < pageSize) {
vm.itemList = vm.itemList.concat(ret.res.data.list);
vm.count = ret.res.data.count;
api.toast({
msg : '没有更多数据了'
});
vm.pageEnd = true;
} else {
vm.itemList = vm.itemList.concat(ret.res.data.list);
vm.count = ret.res.data.count;
pageNum++;
}
}
}
} else {
alert("网络异常，请稍后再试吧")
}
setTimeout('api.hideProgress()', '500');
})
} function reloadList() {
pageNum = 1;
api.showProgress({
title : '努力加载中...',
text : '请稍后...',
modal : false
});
api.ajax({
url : host + "/api/User/AllUserList?pageNum=" + pageNum + "&pageSize=" + pageSize,
method : "get"
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
if (!ret.res.data.list) {
api.toast({
msg : '没有更多数据了'
})
} else {
vm.itemList = ret.res.data.list;
vm.count = ret.res.data.count;
vm.pageEnd = false;
pageNum++;
}
}
} else {
alert("网络异常，请稍后再试吧")
}
setTimeout('api.hideProgress()', '500');
});
}
</script>
</html>
apicloud如何实现优雅的下拉刷新与加载更多的更多相关文章
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- H5 下拉刷新、加载更多
H5 下拉刷新.加载更多 demos const autoLoadMore = (url = ``) => { // todo ... } refs xgqfrms 2012-2020 www. ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
- 【微信小程序】转载：微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- mui前端框架下拉刷新分页加载数据
前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...
- 自己定制ListView，上拉刷新和下拉刷新，加载网络图片，并且添加缓存机制。
package com.lixu.listviewrefresh; import java.util.ArrayList; import java.util.HashMap; import java. ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- listview下拉刷新 上拉(滑动分页)加载更多
最 近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多.新浪微博就是使用这种方式的典型.当用户从网络上读取微博的时候, ...
随机推荐
- iOS sqlite ORM框架-LKDBHelper
LKDBHelper 一个sqlite ORM(全自动操作数据库)框架. 线程安全.不再担心递归锁死的问题 安装要求 iOS 4.3+ 仅支持 ARC FMDB 添加到你的项目 如果你使用 Cocoa ...
- Violet音乐社区界面原型手册
目录 Violet音乐社区界面原型手册 一.引言 1.0 项目前阶段相关文档 1.1 编写目的 1.2 开发背景 二.界面原型展示 2.0 界面设计说明 2.1 首页 2.2 歌单/专辑/单曲界面 2 ...
- Redis Cluster 集群三主三从高可用环境搭建
前言 Redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用. Window环境下载地址:https://github.com/tporadowski/redis ...
- vs code 运行 Django 怎么修改端口
1.具体操作步骤如下 默认情况下,通过 python manage.py runserver 命令行模式默认打开是 8000 端口,如下图所示: 在浏览器预览效果如下: 为了防止端口冲突,我们一般会修 ...
- NCCL(Nvidia Collective multi-GPU Communication Library) Nvidia英伟达的Multi-GPU多卡通信框架NCCL 学习；PCIe 速率调研；
为了了解,上来先看几篇中文博客进行简单了解: 如何理解Nvidia英伟达的Multi-GPU多卡通信框架NCCL?(较为优秀的文章) 使用NCCL进行NVIDIA GPU卡之间的通信(GPU卡通信模式 ...
- Deepin nginx lumen配置
正常安装 sudo apt install nginxsudo apt install php-fpm 启动后将 /etc/nginx/sites-enabled/default 配置文件 copy一 ...
- 用nodejs快速实现websocket服务端（带SSL证书生成）
有不少公司将nodejs的socket.io作为websocket的解决方案,很遗憾的是socket.io是对websocket的封装,并不支持html5原始的websocket协议,微信小程序使用的 ...
- mathematica练习程序（曲线的曲率与挠率）
曲线的曲率k表示曲线的弯曲程度. 计算公式: 曲线的挠率tao表示曲率平面的扭曲程度,平面曲线挠率为0. 计算公式: 这里r代表曲线方程,比如有如下曲线方程:r={a*cos(t),a*sin(t), ...
- 【Resharper】C# “Simplify conditional ternary expression”
#事故现场: 对某个对象做空值检测的时候,结合三元运算符给某变量赋值的时候,R#提示:"Simplify conditional ternary expression" : R#建 ...
- python笔记：配置虚拟开发环境
问题 有的时候开发不同的业务,所需要的环境不一样.一直在同一个环境中开发时候,不同的包版本升级可能会导致另外的业务不能正常工作.另外,有的github上的项目需要的开发环境与你使用的环境不同,冒然的按 ...