c***@qq.com
c***@qq.com
  • 发布:2017-03-21 11:54
  • 更新:2017-03-21 13:13
  • 阅读:2486

下拉刷新功能页面拉不动。

分类:MUI

做了一个下拉刷新,上拉加载的功能,上拉加载可以拉动且功能已实现,但是下拉刷新拉不动。详细代码在附件中有。
我测试时在pulldownRefresh()方法中加了console.log(),发现并没有调用到。我初始化swipe:true,但是好像下滑时间没有监听到。请大家帮帮忙看看是怎么回事。@DCloud_MUI_CJH

mui.init({  
                swipe: true,  
                pullRefresh: {  
                    container: '#pullrefresh',  
                    down: {  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentrefresh: '正在加载...',  
                        auto:true,//自动上拉加载一次  
                        callback: pullupRefresh  
                    }  
                }  
            });  

            mui.plusReady(function(){  
                mui.caipiao.cleara();  
                //判断系统,如果是ios,webview添加样式  
                if(mui.os.ios){  
                    plus.webview.currentWebview().setStyle({  
                        scrollIndicator:'none'  
                    });  
                }else{};                                          

                var self = plus.webview.currentWebview();  
                var spanid = self.spanid;  
                var categoryname=self.categoryname;  
                document.getElementById("categoryname").innerHTML=categoryname;  

            })  
            //点击事件  
            mui.ready(function(){  
                mui("#buttons").on('tap','li',function(){  
                      var url="details.html";  
                      //获取id  
                      var lid = this.getAttribute("id");;  
                      mui.openWindow({  
                        url:url,  
                        id:url,  
                        extras:{  
                              pid:lid,  
                            }  
                      });  
                })                        
            })  

            /**  
             * 下拉刷新具体业务实现  
             */  
            function pulldownRefresh() {  
                console.log(111);  
                setTimeout(function() {  
                }, 1500);  
            }  

            /**  
             * 上拉加载具体业务实现  
             */  
            var count = "1";  
            function pullupRefresh() {  
                var self = plus.webview.currentWebview();  
                var spanid = self.spanid;  

                setTimeout(function() {  
                    mui.caipiao.post(  
                    '/e/cms/article/articlelist',  
                    {  
                        id:spanid,  
                        pageNo:count  
                    },  
                    function(data){  
                        //控制翻页  
                        var list = data.body.page.list;   
                        var no = data.body.pageno;  
                        //最后一个括号里参数为true表示没有更多的数据了  
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(count>=no);  
                        //动态加载栏目中的文章  
                        for(var i=0;i<list.length;i++){  
                            var divid=data.body.page.list[i].id;  
                            var title = data.body.page.list[i].title;  
                            var updateDate = data.body.page.list[i].updateDate;  
                            var image = data.body.page.list[i].image;  
                            var src = "";  
                            var imageUrl = plus.caipiao.imageUrl;  
                            if(image){  
                                var src =imageUrl+image;  
                            }                             
                            var li = document.createElement("li");  
                            li.className = "mui-table-view-cell mui-media";  
                            li.id = divid;  
                            var img = document.createElement("img");  
                            img.src = src;  
                            if(image){  
                                img.className = "mui-media-object mui-pull-right";  
                            }else{  
                                img.style = "display:none";  
                            }  
                            var div = document.createElement("div");  
                            div.className = "mui-media-body";  
                            div.textContent = title;  
                            var p = document.createElement("p");  
                            p.className = "color: gray;font-size: 13px;"  
                            p.textContent = updateDate;  
                            li.appendChild(img);  
                            li.appendChild(div);  
                            div.appendChild(p);  
                            var buttons = document.getElementById("buttons");  
                            buttons.appendChild(li);  
                        }  
                        //下一页  
                        count++;  
                    }  
                    ,'json'  
                );  
                }, 500);  
            }
2017-03-21 11:54 负责人:无 分享
已邀请:
CJH

CJH - 我想要的,我自然会认真

在android手机上 ,mui通过双webview实现下拉刷新;拖动时,拖动的不是div,而是一个完整的webview(子webview)。源代码中你没有父webview,但是参数选择中采用的是双webview模式进行的下拉刷新,所以下拉不生效。
具体使用方法可以参考Hello mui的demo中双webview的下拉刷新模式。文件位置为/examples/pullrefresh_main.html

  • c***@qq.com (作者)

    demo中有pullrefresh_main.html和pullrefresh_sub.html两个html页面,您说的双webview好像是在pullrefersh_main.html中启用双击监听那儿写的,我demo中把pullrefresh_main.html删了也不会对pullrefresh_sub.html下拉刷新上拉加载造成影响。在pullrefresh_sub.html中我也没有看到双webview呀。。。

    2017-03-21 14:04

  • c***@qq.com (作者)

    刚才我说错了,您说得对,在边做边看模式下只有pullrefresh_sub.html就可以下拉刷新了,在安卓上,必须pullrefresh_main.html和pullrefresh_sub.html两个搭配着才能下拉刷新。。。现在我在想怎么把这两个页面揉成一个页面出来(╯﹏╰)。

    2017-03-21 14:36

  • CJH

    回复 c***@qq.com:想整合到一个页面上,可以试试那个单webview下拉刷新的demo,不过那样的话,在低配版的安卓手机上会不流畅,建议老老实实的用双webview..

    2017-03-21 14:44

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