jqMobi中的scroller使用方法

林氏智造 于 2014-08-04 发布 10013 人已阅

HTML

<script src="appframework.min.js"></script>
<script src="appframework.ui.js"></script>
<script src="af.scroller.js"></script>
<link rel="stylesheet" type="text/css" href="af.ui.base.min.css">
<div id="afui">
    <div id="content">
        <div id="main"  class="panel" selected="true">
    <ul class="list" id="j_listContainer">
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
           </ul>
       </div>
    </div>
</div>

JS代码调用

$.ui.ready(function(){
    var myScroller,currentPage=1;
    myScroller = $("#main").scroller(); 
        myScroller.addInfinite();
        myScroller.addPullToRefresh();
        $.bind(myScroller, 'scrollend', function () {
            console.log("scroll end");
         });

          $.bind(myScroller, 'scrollstart', function () {
                console.log("scroll start");
          });

           $.bind(myScroller, "refresh-trigger", function () {
                 console.log("refresh-trigger");
            });
             var hideClose;
            $.bind(myScroller, "refresh-release", function () {
                  console.log("refresh-release");
                  var that = this;
                  clearTimeout(hideClose);
                  hideClose = setTimeout(function () {                                                                          $('#j_listContainer').prepend('<li>item2</li>');
                                    console.log("hiding manually refresh");
                                    that.hideRefresh();
                                }, 1000);
                                return false; //tells it to not auto-cancel the refresh
                            });

                            $.bind(myScroller, "refresh-cancel", function () {
                                console.log("refresh-cancel");
                                clearTimeout(hideClose);

                            });
                            $.bind(myScroller, "refresh-finish", function () {
                                console.log("refresh-finish");
                            });

                            myScroller.enable();

                            $.bind(myScroller, "infinite-scroll", function () {
                                var self = this;
                                    if(currentPage>=5)return false;
                                console.log("infinite triggered");
                                $(this.el).append("<div id='infinite' style='height:60px;line-height:60px;text-align:center;font-weight:bold'>加载更多...</div>");
                                $.bind(myScroller, "infinite-scroll-end", function () {
                                    $.unbind(myScroller, "infinite-scroll-end");
                                    self.scrollToBottom();
                                    setTimeout(function () {
                                        $(self.el).find("#infinite").remove();
                                        self.clearInfinite();
                                            $('#j_listContainer').append('<li>item3</li><li>item3</li><li>item3</li><li>item3</li><li>item3</li><li>item3</li>');currentPage++;
                                        //self.scrollToBottom();
                                    },3000);
                                });
                            });
});

标签

您可能感兴趣的文章

vue.js开发环境准备工作

开发vue项目前需要对整个vue项目进行开发环境的部署,包括所需组件的安装,webpack的配置等。