OKOK
OKOK
  • 发布:2016-08-17 11:41
  • 更新:2016-08-18 10:39
  • 阅读:3318

关于选项卡与下拉刷新

分类:MUI

我使用顶部选项卡+webview的形式,webview里使用了下拉刷新,选项卡是可以滑动的(整个选项卡,因为选项比较多),但是我使用了
down: {
height: 40,
callback: pulldownRefresh
},
这个之后选项卡就不能划了。这是为什么,有什么办法能解决吗?我是新人,选项大家

2016-08-17 11:41 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

请提供完整点的代码。

  • OKOK (作者)

    代码放在下面了。我去掉那个down的部分就可以滑动,加上就滑不了了

    2016-08-17 12:50

OKOK

OKOK (作者)

<div class="mui-slider">  
                <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-scroll">  
                        <a class="mui-control-item" href="T1/tab_1.html" data-index="1">11111</a>  
                        <a class="mui-control-item" href="T1/tab_2.html" data-index="2">22222</a>  
                        <a class="mui-control-item" href="T1/tab_3.html" data-index="3">33333</a>  
                        <a class="mui-control-item" href="T1/tab_3.html" data-index="4">44444</a>  
                        <a class="mui-control-item" href="T1/tab_3.html" data-index="5">55555</a>  
                    </div>  
                </div>  
                <!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>-->  
            </div>

这个是父webview

mui.init({  
                pullRefresh: {  
                    container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                    down: {  
                        height: 40,  
                        callback: pulldownRefresh  
                    },  
                    up: {  
                        contentRefresh: '正在加载....',  
                        callback: pullupRefresh  
                    }  
                }  
            });  

            function pulldownRefresh() {  
                setTimeout(function() {  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for(var i = cells.length, len = i + 3; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                        //下拉刷新,新纪录插到最前面;  
                        table.insertBefore(li, table.firstChild);  
                    }  
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                }, 1500);  
            }  
            var count = 0;  
            /**  
             * 上拉加载具体业务实现  
             */  
            function pullupRefresh() {  
                setTimeout(function() {  
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
                    var table = document.body.querySelector('.mui-table-view');  
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');  
                    for(var i = cells.length, len = i + 20; i < len; i++) {  
                        var li = document.createElement('li');  
                        li.className = 'mui-table-view-cell';  
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                        table.appendChild(li);  
                    }  
                }, 1500);  
            }  
            if(mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

                });  
            } else {  
                mui.ready(function() {  
                    mui('#pullrefresh').pullRefresh().pullupLoading();  
                });  
            }

这个是下拉刷新的JS

OKOK

OKOK (作者)

这个 好像是父窗口的scroll被屏蔽掉了。有大神帮我解答下吗?

赵梦欢

赵梦欢 - 专注前端,乐于分享!

父页面是怎么控制子页面显示的,最好提供一个可以重新问题的测试工程。

  • OKOK (作者)

    您好,项目附件我已经上传了,麻烦帮忙看下,万分感激

    2016-08-17 15:00

  • 赵梦欢

    代码看了,去掉了你说的那个,也不能滚动,不知道你是想实现什么功能,选项卡切换还是webview也可以滚动,如果是一般的webview切换,可以参考tababr-webview,https://segmentfault.com/a/1190000005340854。如果是webview模式选项卡实现滑动切换,参考这篇文章:http://ask.dcloud.net.cn/article/780

    2016-08-17 16:02

OKOK

OKOK (作者)

项目附件

OKOK

OKOK (作者)

求大神帮忙看看,小弟是新手。。不知如何解决

赵梦欢

赵梦欢 - 专注前端,乐于分享!

代码看了,去掉了你说的那个,也不能滚动,不知道你是想实现什么功能,选项卡切换还是webview也可以滚动,如果是一般的webview切换,可以参考tababr-webview,https://segmentfault.com/a/1190000005340854。如果是webview模式选项卡实现滑动切换,参考这篇文章:http://ask.dcloud.net.cn/article/780

  • OKOK (作者)

    是这样子的,就是选项卡中的选项有很多,上面显示不全,能滑动选项卡看到被隐藏的选项。现在是down加上的时候,那个选项卡就不能滑,去掉了就可以

    2016-08-17 16:21

OKOK

OKOK (作者)

那位大神帮忙给看下啊,就是下拉刷新结合顶部可拖动的选项卡,但是加了下拉刷新,选项卡拖动不了了。

OKOK

OKOK (作者)

就没有人帮忙解答下吗?我下拉刷新用的是hello mui中的子页面的刷新,选项卡用的是可拖动选项卡+下拉树新里面的选项卡。但是这样一结合,选项卡就不能拖动了。。。求大神啊

Trust

Trust - 少说废话

关于问题

滑动切换的示例是div模式选项卡切换,父子页面形式就已经是webview模式了。这两者是有很大区别的,所以不是简单套一下就可以直接用了。

选项卡切换

首先,选项卡大致分为两种模式,div模式和webview模式,在Hello mui示例中也有很明显的区分。

DIV模式

div模式也就是在单个html文件中,实现切换,每个选项对应的内容都在一个html文件中。Hello mui中下拉刷新示例中的“选项卡切换+下拉刷新”采用的就是这种模式,并且是依赖示例中的JS插件的。

webview模式

webview模式的选项卡,在真机运行Hello mui示例时可以预览。这种模式下,每个webview各司其职,分别加载对应的html文件,也就是说整体的元素内容,被拆开放置于各个webview中。也就是说,你在A窗口滑动,B窗口并不会受到影响(不是绝对不受影响)。

webview模式的下拉上拉

webview模式的下拉及上拉,真机运行Hello mui示例也是可以预览。另外结合webview模式选项卡切换,分别在每个子窗口中配置相应的下拉或上拉,就可以实现。具体实现可以参考示例以及mui相应的文档

关于示例

Hello mui项目中的示例,许多是可以直接搬过来用的。关于webview,建议可以阅读下相关的API。
另外,这里有一个朋友分享的新手示例,还有一篇粗糙的示例文章
参考上述一系列资料,希望可以帮助到你。

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