龙城小生
龙城小生
  • 发布:2017-09-18 19:46
  • 更新:2018-04-18 12:36
  • 阅读:1987

双webview模式下scroll滚动失效

分类:MUI

用官方案例中的Reader修改的。。启用了双webview模式,首页面顶部导航,使用了scroll滚动,但是子页面启用下拉刷新后,主页面的导航就无法滚动。。去掉下拉刷新后恢复正常。。找不到原因啊。。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>iApp开发测试</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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/app.css" />  

        <style type="text/css">  
            .mui-content .mui-pull-top-pocket{top: 35px !important;}  
            #topNav a.mui-active{color:#09742D;border-bottom: none;}  
            .mui-bar-tab .mui-tab-item.mui-active {color: #09742D;}  
            .mui-bar-nav~.mui-content {padding-top: 0;}  
        </style>  
    </head>  

    <body>  

        <nav class="mui-bar mui-bar-tab">  
            <a class="mui-tab-item mui-active" href="#tabbar">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="#tabbar-with-chat">  
                <span class="mui-icon mui-icon-email"></span>  
                <span class="mui-tab-label">消息</span>  
            </a>  
            <a class="mui-tab-item" href="#tabbar-with-contact">  
                <span class="mui-icon mui-icon-contact"></span>  
                <span class="mui-tab-label">通讯录</span>  
            </a>  
            <a class="mui-tab-item" href="#tabbar-with-map">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">设置</span>  
            </a>  
        </nav>  

        <div class="mui-content">             
            <div id="topNav" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                <div class="mui-scroll">  
                    <a class="mui-control-item mui-active">推荐</a>  
                    <a class="mui-control-item">热点</a>  
                    <a class="mui-control-item">北京</a>  
                    <a class="mui-control-item">社会</a>  
                    <a class="mui-control-item">娱乐</a>  
                    <a class="mui-control-item">科技</a>  
                    <a class="mui-control-item">时政</a>  
                    <a class="mui-control-item">直播</a>  
                </div>  
            </div>            
        </div>  

        <script type="text/javascript" src="js/mui.min.js"></script>  
        <script type="text/javascript" src="js/app.js"></script>  
        <script type="text/javascript">  
            var aniShow = "pop-in";  
            var setting_view = null;  
            var _self;  
            var webstyle = {  
                        "render": "always",  
                        "popGesture": "hide",  
                        "bounce": "vertical",  
                        "bounceBackground": "#efeff4",  
                        "titleNView": {  
                                backgroundColor: '#16873C', //导航栏背景色  
                                titleText: '设置', //导航栏标题  
                                titleColor: '#ffffff', //文字颜色  
                                type: 'default', //透明渐变样式  
                                autoBackButton: true, //自动绘制返回箭头  
                                splitLine: { //底部分割线  
                                    color: '#108337'  
                                }  
                        }  
            }  

            //mui初始化,配置下拉刷新  
            mui.init({  
                swipeBack:false, subpages:[{url:"list.html",id:"list",styles:{top:"107px",bottom:"51px",},extras:{}  
                }],  
         //预加载页面      
                preloadPages: [{...}]  
            });  

            mui.plusReady(function() {  
                //仅支持竖屏显示  
                plus.screen.lockOrientation("portrait-primary");  

                // 隐藏滚动条  
                plus.webview.currentWebview().setStyle({scrollIndicator:'none'});  

                //设置scroll插件参数_导航栏滚动  
                mui('#topNav').scroll({  
                    indicators: false, //是否显示滚动条  
                    deceleration: mui.os.ios ? 0.003 : 0.0006, //阻尼系数,系数越小滑动越灵敏  
                    bounce: true //是否启用回弹  
                });   

                //绘制顶部图标  
                _self = plus.webview.currentWebview();  
                var titleView = _self.getNavigationbar();  
                if(!titleView) {titleView = plus.webview.getLaunchWebview().getNavigationbar();}  
                titleView.drawRect("#108337", {top: "43px",height:"1px",left: "0px"});   
                ......  
            });  

        </script>  
    </body>  
</html>  

// list.html  

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>iApp开发测试</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/app.css" />  
        <style>  
            html,  
            body {  
                min-height: 100%;  
                background: #efeff4;  
                background-color: #efeff4;  
            }  
            .kr-article .kr-table-view .mui-media-body {  
                overflow: hidden;  
                text-overflow: ellipsis;  
                display: -webkit-box;  
                -webkit-line-clamp: 3;  
                -webkit-box-orient: vertical;  
                white-space: normal!important;  
                word-wrap: break-word;  
                height: 63px;  
            }  
            .kr-article .kr-table-view .kr-time {  
                position: absolute;  
                left: 110px;  
                bottom: 8px;  
            }  
            .kr-loading {  
                color: gray;  
                ;  
                text-align: center;  
                font-size: 16px;  
                padding: 15px;  
                background: #efeff4;  
                background-color: #efeff4;  
                border: none;  
            }  
            .mui-scroll {  
                position: absolute;  
                z-index: 1;  
                width: 100%;  
                -webkit-transform: none;  
                }  
        </style>  
    </head>  

    <body class="kr-article">  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <div id="slider" class="mui-slider kr-slider">  
                    <div class="mui-slider-group">  
                        <div class="mui-slider-item">  
                            <a id="slider-image" href="javascript:;" style="background-image: url(img/blank.jpg);">  
                                <div id="slider-title" class="mui-slider-title"></div>  
                                <div class="kr-image-overlay"></div>  
                            </a>  
                        </div>  
                    </div>  
                </div>  
                <ul id="kr-news" class="mui-table-view kr-table-view">  
                    <li class="kr-loading">正在加载...</li>  
                </ul>  
            </div>  
        </div>  
        <script type="text/javascript" charset="UTF-8" src="js/mui.min.js"></script>  
        <script type="text/javascript" charset="UTF-8" src="js/feed.js"></script>  
        <script type="text/javascript" charset="UTF-8" src="js/html5sql.js"></script>  
        <script type="text/javascript" charset="UTF-8" src="js/app.js"></script>  
        <script type="text/javascript" charset="UTF-8" src="js/news.js"></script>  
        <script type="text/javascript" charset="UTF-8" src="tmpl/news_item.js"></script>  
        <script>  
            console.time("进入页面到呈现");  
            var divEl = document.createElement("div");  
            var newsEl = document.getElementById("kr-news");  
            var sliderEl = document.getElementById("slider");  
             //初始化下拉刷新模块    
            mui.init({  
                pullRefresh: {  
                    container: '#pullrefresh',                    
                    down: {  
                        callback: pulldownRefresh  
                    },                    
                    up: {  
                        contentrefresh: '正在加载...',  
                        callback: pullupRefresh  
                    }  
                }  
            });  

            function throwGetNewsError() {  
                mui.plusReady(function() {  
                    mui('#pullrefresh').pullRefresh().endPulldown();  
                    mui.toast("获取新闻时发生了异常");  
                });  
            };  
             //点击新闻列表,打开新闻详情  
            mui('#pullrefresh').on('tap', 'a', function() {  
                open_new_detail(this.getAttribute('data-guid'));  
            });  

             //TODO 为了解决系统分享闪屏问题,临时变成双webview  
            var detailMainWebview = null; //详情页面父webview  
            var detailWebview = null; //详情页面子webview  

            function open_new_detail(id) {...};  

            /** 新版首次进入执行代码开始 **/  
            kr.dbReady(function(isFirst) {  
                //第一次显示,从rss订阅中抓取  
                if (isFirst) {  
                    clearNewsList();  
                    mui.plusReady(function() {  
                        getFeed();  
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh();  
                    });  
                }  
                else {  
                    //非第一次,直接从本地数据库中读取  
                    //加载初始化数据  
                    pullupRefresh(true, true);  
                }  
            });  

            mui.plusReady(function() {  
                getSlider(true);  
                //1秒之后,自动刷新  
                setTimeout(function() {pulldownRefresh();}, 500);  
            });  

            /** 新版首次进入执行代码结束 **/  
            var latestPubDate = Number.MAX_VALUE;  
            var hasMore = true;  
            /**  
             * 获取顶部图片轮播区文章详情  
             * @param {Boolean} isLocal :是否已缓存本地  
             */  
            function getSlider(isLocal) {  
                //sliderEl.classList.remove('mui-hidden');  
                kr.getSlider(isLocal, function(news) { //等feed完成后再加载slider  
                    //console.log("news 333:" + JSON.stringify(news));  
                    if (news) {  
                        if (typeof news === 'string') {  
                            //console.log("news:" + news);  
                            kr.getNewsByGuid(news, updateSlider);  
                        } else {  
                            updateSlider(news);  
                        }  
                    }  
                });  
            };  

            function getFeed(isClearCache) {  
                //console.log('getFeed=>' + isClearCache);  
                if (isClearCache === 'true') {  

                    latestPubDate = Number.MAX_VALUE;  
                    newsEl.innerHTML = ''; //清空所有  

                    if (!hasMore) { //当清除缓存之前已上拉加载到底需要重置pullrefresh  
                        mui('#pullrefresh').pullRefresh().refresh(true);  
                        hasMore = true;  
                    }  
                }  
                //加载数据时,显示雪花进度条  
                mui('#pullrefresh').pullRefresh().pullupLoading(function() {  
                    //获取新闻列表,存储数据库  
                    kr.getFeed(  
                        function(hasNew){getSlider();kr.getNews(function(news) {refresh(news);}, throwGetNewsError);},  
                        function(){getSlider(); mui('#pullrefresh').pullRefresh().endPullupToRefresh();}  
                    );  
                });  
            }  

            function pulldownRefresh() {  
                //console.log('pulldown');  
                kr.getFeed(function(hasNew) {  
                    //更新顶部轮播区域  
                    getSlider();  
                    //console.log(hasNew);                    
                    if (hasNew) {  
                        kr.getNews(false, hasNew, function(news) {refresh(news);}, throwGetNewsError);  
                    }  
                    else {  
                        setTimeout(function() {mui('#pullrefresh').pullRefresh().endPulldown();}, 500);  
                    }  
                }, throwGetNewsError);  
            };  
            /**  
             * 更新新闻列表  
             * @param {Object} news  列表数据  
             */  
            function refresh(news) {  
                if (news) {  
                    if (latestPubDate === Number.MAX_VALUE && news && news.length > 0) {  
                        latestPubDate = news.item(news.length - 1).pubDate;  
                    }  
                    for (var i = news.length - 1; i >= 0; i--) {  
                        divEl.innerHTML = news_item(processNews(news.item(i)));  
                        newsEl.insertBefore(divEl.firstElementChild, newsEl.firstElementChild);  
                    }  
                }  
                mui('#pullrefresh').pullRefresh().endPulldown();  
            };  
            /**  
             * 更新顶部图片轮播内容  
             * @param {Object} 图片轮播区广告详情  
             */  
            var sliderImageEl = document.getElementById("slider-image");  
            var sliderTitleEl = document.getElementById("slider-title");  
             //         sliderImageEl.addEventListener('tap', function() {  
             //             console.log("sliderImageEl tap");  
             //             if (sliderImageEl.newsId) {  
             //                 open_new_detail(sliderImageEl.newsId);  
             //             }  
             //         });  
            function updateSlider(news) {  
                //alert('sliderImageEl');  
                //console.log("updateSlider news:" + JSON.stringify(news));  
                if (news.image) {  
                    sliderImageEl.setAttribute('style', 'background-image: url("' + news.image + '");');  
                }  
                else {  
                    if (!news.image && news.cover) {  
                        kr.isDownloadImageAsync(function(yes) {  
                            if (!yes) return;  
                            (function(news) {  
                                //console.log(news);  
                                news.id = news.guid; //.substring(news.guid.lastIndexOf('/') + 1, news.guid.length - 5);  
                                news.id = news.guid.substring(news.guid.lastIndexOf('/') + 1, news.guid.length - 5);  
                                var cover = news.cover.replace('!heading', '!slider');  
                                addDownloadImage(news.id, cover, function(src) {  
                                    kr.updateNews(news.guid, src); //更新数据库  
                                    sliderImageEl.setAttribute('style', 'background-image: url("' + src + '");');  
                                    //console.log('slider downloaded image:::' + src);  
                                });  
                            })(news);  
                        });  
                    }  
                }  
                sliderImageEl.setAttribute('data-guid', news.guid);  
                sliderTitleEl.innerText = news.title;  
            };  

            function clearNewsList() {  
                newsEl.innerHTML = '';  
            };  

            function pullupRefresh(noHandlePullrefresh, clear) {  
                //console.log('pullup');  
                kr.getNews(latestPubDate, undefined, function(news) {  
                    if (news && news.length > 0) {  
                        if (clear) {  
                            clearNewsList();  
                        }  
                        latestPubDate = news.item(news.length - 1).pubDate;  

                        console.time("template");  
                        for (var i = 0, len = news.length; i < len; i++) {  
                            divEl.innerHTML = news_item(processNews(news.item(i)));  
                            newsEl.appendChild(divEl.firstElementChild);  
                        }  
                        console.timeEnd("template");  

                        if (!noHandlePullrefresh) {  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh();  
                        }  
                    }  
                    else {  
                        hasMore = false;  
                        if (!noHandlePullrefresh) {  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);  
                        }  
                        if (clear) {  
                            clearNewsList();  
                        }  
                    }  
                    console.timeEnd("进入页面到呈现");  
                }, function() {  
                    if (!noHandlePullrefresh) {  
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh();  
                    }  
                });  
            }  

        </script>  
    </body>  
</html>  
2017-09-18 19:46 负责人:无 分享
已邀请:
7***@qq.com

7***@qq.com

我的也是这个问题,没办法,小白只能加了个fix按钮点击刷新了=。=

hylong

hylong

参考http://ask.dcloud.net.cn/article/13108。
首页顶部导航有scroll滚动,子页面也有下拉刷新

要回复问题请先登录注册