AppCan下拉刷新的代码

来源:互联网 发布:源码baiboku 编辑:程序博客网 时间:2024/05/17 23:17

最近发现好多页面都没有下拉刷新,于是开始找文档,找方法,找攻略。

自己也测试了下 ,经过自己整理的东西还是让人印象深刻。好了,废话少说。


<script type="text/javascript" charset="utf-8">
        //0 表示顶  1 表示 底  2 表示结束


        window.uexOnload = function(type) {
            //设置是否支持网页弹动
            uexWindow.setBounce(1);
            //弹动状态改变的监听
            //type 对应的位置  state 状态0:滑动事件开始;1:刷新事件开始;2:滑动事件结束
            uexWindow.onBounceStateChange = function(type, state) {
                if (type == 0 && state == 2) {//顶部弹动


                    alert("这是事件的地方");
                    //设置弹动效果结束后显示的网页
                    uexWindow.resetBounceView("0");
                }
            };
            var json = {
                //展示下拉状态文字的颜色
                "textColor" : "#000",
                //下拉状态小图标的路径,只支持res:// 格式 ,还想知道详情可以去AppCan官网找找资料
                "imagePath" : "res://refesh_icon.png",
                //显示的二级文字
                "levelText" : "更新日期",
                //开始拖动直到超过刷新临界线之前显示的文字
                "pullToReloadText" : "下拉刷新",
                //拖动超过刷新临界线后显示的文字
                "releaseToReloadText" : "释放刷新",
                //拖动超过刷新临界线并且释放拖动,进入刷新状态时显示的文字
                "loadingText" : "正在刷新,请稍候..."
            };
            //这个函数用来设置弹动的参数和显示的样式,样式就是上面的json
            uexWindow.setBounceParams(0, json);
            //显示弹动的效果
            uexWindow.showBounceView({
                type : "0", //弹动的位置
                color : "rgba(15, 155, 155, 100)", //弹动部位的颜色
                flag : 1 //是否显示内容 1显示 0不显示
            });
            //注册接收弹动事件
            //左边的参数 表示位置  右边的 表示是否调用onBounceStateChange方法 0 不调用  1 调用
            uexWindow.notifyBounceEvent(0, 1);
        }
    </script>



有了注释看起来 就明了多了 不用去翻文档了 谢谢!

代码可以直接测试

原创粉丝点击