dreamit1986
dreamit1986
  • 发布:2016-07-24 09:42
  • 更新:2019-11-05 20:34
  • 阅读:4216

下拉刷新后,上拉加载有时会反复执行

分类:MUI

下拉刷新后,上拉加载有时会反复执行,这个是怎么造成的呢

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>news-list</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="css/mui.min.css">  
        <link rel="stylesheet" href="css/override.css" />  
        <link rel="stylesheet" type="text/css" href="css/pull-to-refresh.css" />  
        <style type="text/css">  
            .mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item) {  
                line-height: inherit;  
                position: relative;  
                display: inline;  
            }  

            #slider-image> div.mui-slider-group.mui-slider-loop> div.mui-slider-item> a> img {  
                height: 220px;  
            }  

            .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {  
                border: none;  
            }  

            .mui-table-view .mui-media-object {  
                max-width: 130px;  
                max-height: 80px;  
                height: 100%;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  

            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="slider-segmented-control" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div id="slider-segmented-control-scroll" class="mui-scroll">  
                        <a id="control-locked" class="mui-control-item mui-active" href="#item-locked">  
                            要闻  
                        </a>  
                        <a id="category-trigger" class="mui-control-item">  
                            +  
                        </a>  
                    </div>  
                </div>  
                <div id="item-slider-group" class="mui-slider-group">  
                    <div id="item-locked" class="mui-slider-item mui-control-content mui-active">  
                        <div id="scroll1" class="mui-scroll-wrapper">  
                            <div class="mui-scroll" data-category="7" data-hassliderimage="true">  
                                <ul class="mui-table-view">  
                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  

        <script src="js/constants.js"></script>  
        <script src="js/mui.min.js"></script>  
        <script src="js/content-eye-protect.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript" src="js/mui.pullToRefresh.js"></script>  
        <script src="js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            //生成栏目标签  
            function createTabs(shownCategories) {  

                var categoryTrigger = document.querySelector("#category-trigger");  
                var controlScroll = document.querySelector("#slider-segmented-control-scroll");  
                var sliderGroup = document.querySelector("#item-slider-group");  

                var shownCategoriesJsonArray = JSON.parse(shownCategories);  
                for(var i = 0; i < shownCategoriesJsonArray.length; i++) {  
                    var _showCategoryJson = (shownCategoriesJsonArray[i]);  

                    var _a = document.createElement("a");  
                    _a.className = "mui-control-item";  
                    _a.setAttribute("href", "#item" + i);  
                    _a.innerHTML = _showCategoryJson.title;  
                    controlScroll.insertBefore(_a, categoryTrigger);  

                    var _div = document.createElement("div");  
                    _div.className = "mui-slider-item mui-control-content";  
                    _div.id = "item" + i;  
                    var _div2 = document.createElement("div");  
                    _div2.className = "mui-scroll-wrapper";  
                    var _div3 = document.createElement("div");  
                    _div3.className = "mui-scroll";  
                    _div3.setAttribute("data-category", _showCategoryJson.id);  
                    _div3.setAttribute("data-hassliderimage", _showCategoryJson.hasSliderImage);  
                    _ul = document.createElement("ul");  
                    _ul.className = "mui-table-view";  
                    _div3.appendChild(_ul);  
                    _div2.appendChild(_div3);  
                    _div.appendChild(_div2);  
                    sliderGroup.appendChild(_div);  
                }  
            }  

            //创建焦点图   
            function createSliderImage(category) {  

                var slider = document.createElement("div");  
                slider.className = "mui-slider";  

                var sliderGroup = document.createElement("div");  
                sliderGroup.className = "mui-slider-group mui-slider-loop";  
                var sliderIndicator = document.createElement("div");  
                sliderIndicator.className = "mui-slider-indicator mui-text-right";  
                mui.ajax({  
                    type: "get",  
                    url: SLIDER_IMAGE_API_BASE_URL + "&catid=" + category + "&num=3",  
                    async: true,  
                    dataType: "json",  
                    success: function(data) {  
                        mui.each(data.items, function(index, _item) { //循环新闻列表数组  
                            //创建每个sliderItem  
                            var _img = document.createElement("img");  
                            _img.src = _item.thumbnail;  

                            var _p = document.createElement("p");  
                            _p.className = "mui-slider-title";  
                            _p.innerHTML = _item.title;  

                            var _a = document.createElement("a");  
                            _a.href = "#";  
                            _a.setAttribute("data-id", _item.id);  
                            _a.setAttribute("data-category", data.category);  

                            var sliderItem = document.createElement("div");  
                            sliderItem.className = "mui-slider-item";  
                            _a.appendChild(_img);  
                            _a.appendChild(_p);  
                            sliderItem.appendChild(_a);  

                            //点击进入详情  
                            sliderItem.addEventListener("tap", function() {  
                                mui.openWindow({  
                                    url: "news-detail.html",  
                                    id: "news-detail.html",  
                                    extras: {  
                                        _id: _item.id,  
                                        _category: category,  
                                    }  
                                });  
                            });  

                            sliderGroup.appendChild(sliderItem);  

                            //创建每个indicator  
                            var indicator = document.createElement("div");  
                            if(index == 0) {  
                                indicator.className = "mui-indicator mui-ellipsis mui-active";  
                            } else {  
                                indicator.className = "mui-indicator mui-ellipsis";  
                            }  
                            sliderIndicator.appendChild(indicator);  
                        });  
                        //添加首尾链接  
                        var _firstSliderItem = sliderGroup.firstElementChild;  
                        var _firstClone = _firstSliderItem.cloneNode(true);  
                        _firstClone.classList.add("mui-slider-item-duplicate");  
                        var _lastSliderItem = sliderGroup.lastElementChild;  
                        var _lastClone = _lastSliderItem.cloneNode(true);  
                        _lastClone.classList.add("mui-slider-item-duplicate");  
                        sliderGroup.insertBefore(_lastClone, _firstSliderItem);  
                        sliderGroup.appendChild(_firstClone);  
                        slider.appendChild(sliderGroup);  
                        slider.appendChild(sliderIndicator);  
                        //slider上的操作要slider加载完毕后再执行  
                        mui(slider).slider({ //自动轮播  
                            interval: 5000  
                        });  
                    },  
                    error: function(xhr, type, errorThrown) {  
                        console.log(errorThrown);  
                    }  
                });  
                return slider;  
            }  

            //创建文章列表元素  
            function createPullToRefreshItems(_ul, data, refresh) {  
                var documentFragment = document.createDocumentFragment();  
                //每循环一次就创建一个mui-table-view-cell节点  
                mui.each(data.items, function(index, _item) { //循环新闻列表数组  
                    //创建一个新的li  
                    var _li = document.createElement("li");  
                    _li.className = "mui-table-view-cell mui-media";  
                    _li.setAttribute("data-id", _item.id);  
                    _li.setAttribute("data-category", data.category);  

                    var _img = document.createElement("img");  
                    _img.className = "mui-media-object mui-pull-left";  
                    _img.src = _item.thumbnail;  

                    var _div = document.createElement("div");  
                    _div.className = "mui-media-body"; //mui-ellipsis  

                    var _text = document.createTextNode(_item.title);  
                    _div.appendChild(_text);  

                    if(_item.thumbnail) {  
                        _li.appendChild(_img);  
                    }  
                    _li.appendChild(_div);  
                    documentFragment.appendChild(_li);  

                    //每个li点击后进入新闻详情页  
                    _li.addEventListener("tap", function(event) {  
                        mui.openWindow({  
                            url: "news-detail.html",  
                            id: "news-detail.html",  
                            extras: {  
                                _id: _item.id,  
                                _category: data.category,  
                            }  
                        });  
                    });  
                });  

                //如果刷新(下拉的情况)  
                if(refresh) {  
                    var _ulClone = _ul.cloneNode();  
                    var _parent = _ul.parentNode;  
                    _parent.removeChild(_ul);  
                    _ulClone.appendChild(documentFragment);  
                    _parent.insertBefore(_ulClone, _parent.lastElementChild); //插入到上拉提示条上方  
                } else {  
                    _ul.appendChild(documentFragment);  
                }  
            }  

            var pages = []; //初始页  
            var size = 3; //每页几个  
            var deceleration = mui.os.ios ? 0.003 : 0.0009; //阻尼系数  
            mui(".mui-scroll-wrapper").scroll({  
                bounce: true,  
                indicators: true, //是否显示滚动条  
                deceleration: deceleration  
            });  

            mui.plusReady(function() {  

                //加载标签  
                var shownCategories = plus.storage.getItem("shownCategories");  
                createTabs(shownCategories);  

                //处理pullToRefresh  
                var pullToRefreshs = document.querySelectorAll(".mui-slider-group .mui-scroll");  
                mui.each(pullToRefreshs, function(index, _pullToRefresh) {  
                    pages[index] = 1; //初始页为1  
                    var category = _pullToRefresh.getAttribute("data-category"); //获得附在a标签上的新闻类别id数据  
                    var hasSliderImage = _pullToRefresh.getAttribute("data-hassliderimage");  

                    //焦点图处理  
                    if(hasSliderImage == "true") {  
                        var slider = createSliderImage(category);  
                        _pullToRefresh.insertBefore(slider, _pullToRefresh.firstElementChild); //焦點圖插在拉動刷新區的上方  
                    }  

                    //上下拉处理  
                    mui(_pullToRefresh).pullToRefresh({  

                        //下拉刷新  
                        down: {  
                            height: 100,  
                            contentinit: '下拉可以刷新',  
                            contentdown: '下拉可以刷新',  
                            contentover: '释放立即刷新',  
                            contentrefresh: '正在刷新...',  
                            callback: function() {  
                                var self = this;  
                                mui.ajax({  
                                    type: "get",  
                                    url: NEWS_LIST_API_BASE_URL + "&size=" + size + "&catid=" + category + "&page=1",  
                                    async: true,  
                                    dataType: "json",  
                                    success: function(data) {  
                                        var _ul = self.element.querySelector(".mui-table-view"); //获得第一个.mui-table-view也就是最近一次加载出来的列表ul  
                                        createPullToRefreshItems(_ul, data, true);  
                                    },  
                                    error: function(xhr, type, errorThrown) {  
                                        console.log(errorThrown);  
                                    }  
                                });  

                                setTimeout(function() {  
                                    self.endPullDownToRefresh(); //完成后要停止刷新  
                                    self.refresh(true);  
                                    pages[index] = 2;  
                                }, 500);  
                            }  
                        },  

                        //上拉加载   
                        up: {  
                            auto: true,  
                            offset: 0, //距离底部高度(到达该高度即触发)  
                            show: false,  
                            contentinit: '上拉显示更多',  
                            contentdown: '上拉显示更多',  
                            contentrefresh: '正在加载...',  
                            contentnomore: '没有更多数据了',  
                            callback: function() {  
                                var self = this;  
                                mui.ajax({  
                                    type: "get",  
                                    url: NEWS_LIST_API_BASE_URL + "&size=" + size + "&catid=" + category + "&page=" + pages[index],  
                                    async: true,  
                                    dataType: "json",  
                                    success: function(data) {  
                                        var nomore = (pages[index] == data.num);  
                                        pages[index] = pages[index] + 1; //每加载一页页码就自增一次  
                                        var _ul = self.element.querySelector(".mui-table-view"); //获得第一个.mui-table-view也就是最近一次加载出来的列表ul  
                                        createPullToRefreshItems(_ul, data, false);  
                                        self.endPullUpToRefresh(nomore); //完成后要停止刷新  
                                    },  
                                    error: function(xhr, type, errorThrown) {  
                                        console.log(errorThrown);  
                                    }  
                                });  
                            }  
                        }  
                    });  

                });  
            });  

            //跳转栏目定制页  
            document.querySelector("#category-trigger").addEventListener("tap", function() {  
                mui.openWindow({  
                    url: "category.html",  
                    id: "category.html"  
                });  
            });  
        </script>  
    </body>  

</html>
2016-07-24 09:42 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

请上传完整的示例文件,方便我们这边调试。

  • dreamit1986 (作者)

    页面文件 http://ask.dcloud.net.cn/file/download/file_name-bmV3cy1saXN0LnppcA==__url-aHR0cDovL2ltZy5jZG4ucWluaXUuZGNsb3VkLm5ldC5jbi91cGxvYWRzL2Fuc3dlci8yMDE2MDcyNC84N2NkMDVjMDcxM2ZhNjI2NmVmNmY4ZDZiNDY3NTJlMA== 用的mui3.2.0

    2016-07-24 20:31

  • dreamit1986 (作者)

    接口地址不太方便给了,请原谅,生成的列表元素是标准的按照hellomui例子的样子生成的,然后在上下拉上边有一个轮播图,最上边的Tab是动态生成的

    2016-07-24 20:52

  • Jonny515688

    我也碰到改问题,目前没有查到原因。pullsh.refresh(true);这样一重置就会去执行刷新,不是想要的效果

    2017-03-23 15:40

  • 1129671452@qq.com

    能给出答案否,到底是为啥??

    2018-01-31 17:17

dreamit1986

dreamit1986 (作者)

页面文件 用的mui3.2.0

笑笑吧

笑笑吧

我也出现了。
下拉刷新时候,结束刷新
mui('#content').pullRefresh().endPulldownToRefresh();
然后重置上拉加载。
mui('#content').pullRefresh().refresh(true);

这个时候,就执行了上拉加载了,莫名其妙的。

android 没有问题。主要是iOS

  • dreamit1986 (作者)

    你的后来解决了么

    2016-07-28 08:59

  • 笑笑吧

    iOS下不用 这个重置的,就问题。 有个折中的办法,就是当下拉刷新后,禁止上拉,然后延迟两秒 在开启上拉。

    2016-08-18 17:51

  • Jonny515688

    同样碰到改问题,莫名其妙

    2017-03-23 15:42

439036895@qq.com

439036895@qq.com - 90后IT男

有没有大神解决下啊。

1127566250@qq.com

1127566250@qq.com

臭傻逼,写这么多还命名用下划线

该问题目前已经被锁定, 无法添加新回复