apicloud如何实现优雅的下拉刷新与加载更多

最新推荐文章于 2023-03-03 15:56:46 发布

weixin_30633507

最新推荐文章于 2023-03-03 15:56:46 发布

阅读量278

点赞数

文章标签： javascript 移动开发 java ViewUI

原文链接：http://www.cnblogs.com/yechangzhong-826217795/p/11314229.html

版权

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>

转载于:https://www.cnblogs.com/yechangzhong-826217795/p/11314229.html

weixin_30633507

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
apicloud如何实现优雅的下拉刷新与加载更多

apicloud中提供下拉刷新监听事件api，也提供滚动到底部事件的监听，能够实现下拉刷新和滚动到底部加载更多功能，但是我们真的就满足实现功能了吗？将两个代码拼凑起来运行看看发现了什么？是的，在滚动到底部加载更多的时候底部会弹动，有人可能会说触发加载更多的时候直接放一个遮罩view，也就是progress，用来禁止用户继续对当前view产生触摸事件就行，但是如果你很快滑动到...
复制链接

扫一扫