歡迎使用CSDN-markdown編輯器

移動端滑動事件 touch

##

            var status = 0;//定義是否滑動加載狀態碼
//            touch監聽滑動的函數,以及ajax加載的函數
            (function(){
                var load_more = function () { //ajax加載更多內容的函數
                    var url = "{{ routeUrl('web_article_list_ajax') }}";
                    var catId = "{{ categoryId }}";
                    var page = loadMore.data('page');
                    var params = {page: page, catId: catId};
                    asyncSendAction(url, params, true, false, function (resp) {
                        if (resp.code == 0) {
                            articleList.append(resp.html);
                            if (resp.data['hasMore']) {
                                loadMore.data('page', page + 1);
                            } else {
                                loadMore.data('page', 'LAST');
                                loadMore.remove();
                            }
                        }
                    });
                }
                var LSwiperMaker = function(o){ //
                    var that = this;
                    this.config = o;
                    this.control = false;
                    this.sPos = {};
                    this.mPos = {};
                    this.dire;
                    this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
                    this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
                    this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);

                }
                LSwiperMaker.prototype.start = function(e){ //滑動開始
                    var point = e.touches ? e.touches[0] : e;
                    this.sPos.x = point.screenX;
                    this.sPos.y = point.screenY;
                }
                LSwiperMaker.prototype.move = function(e){  //滑動進行中
                    var point = e.touches ? e.touches[0] : e;
                    this.control = true;
                    this.mPos.x = point.screenX;
                    this.mPos.y = point.screenY;
                    if(status == 1){
                        load_more();
                        status = 0;
                    }
                }
                LSwiperMaker.prototype.end = function(e){ //滑動結束
                    this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
                    // if (this.mPos.y - this.sPos.y <=-200) { //向上滑動超過200 執行
                    // };
                    this.control = false;
                    this.config.backfn(this);
                }
                window.LSwiperMaker = LSwiperMaker;
//                document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove衝突
            }())
            $(window).scroll(function(){ //jquery 判斷滾動條是否位置瀏覽器的最底端
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if(scrollTop + windowHeight == scrollHeight){
                    status = 1; //如過滾動條位於最低端，把狀態置於1
                }
            });
            var a = new LSwiperMaker({
                bind:document.getElementById("article-list"),  // 綁定的DOM對象
                dire_h:false,     //true 判斷左右， false 判斷上下
            })

引用塊內容