欢迎使用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 判断上下
            })

引用块内容