Quaider
Quaider
  • 发布:2017-07-02 17:40
  • 更新:2019-03-08 11:54
  • 阅读:3692

顶部选项卡-可左右拖动(webview)示例如何做到tab与webview联动滚动

分类:MUI

顶部选项卡-可左右拖动(webview)的示例中,如何做到tab与webview联动滚动,效果类似uc头条一样。

目前的示例,如果选项卡多了的话,只有webview的切换, tab选项卡没有跟随滚动到可视区域。

该怎么做,感觉滑动操作也不灵敏?

2017-07-02 17:40 负责人:无 分享
已邀请:
Quaider

Quaider (作者)

<header class="mui-bar mui-bar-nav">  
            <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->  
            <h1 class="mui-title">选项卡练习(webview)</h1>  
        </header>  
        <div class="mui-content">  
            <!--描述:slider-->  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" 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" href="#item1mobile" data-wid="tab-1.html">  
                            推荐  
                        </a>  
                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-2.html">  
                            视频  
                        </a>  
                        <a class="mui-control-item" href="#item3mobile" data-wid="tab-3.html">  
                            健康  
                        </a>  
                        <a class="mui-control-item" href="#item4mobile" data-wid="tab-4.html">  
                            社会  
                        </a>  
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-5.html">  
                            娱乐  
                        </a>  
                        <a class="mui-control-item" href="#item6mobile" data-wid="tab-6.html">  
                            军事  
                        </a>  
                        <a class="mui-control-item" href="#item7mobile" data-wid="tab-7.html">  
                            数码  
                        </a>  
                    </div>  
                </div>  
            </div>  
        </div>
mui.plusReady(function() {  
                var items = [];  
                for(var i = 1; i <= 7; i++) {  
                    items.push({  
                        id: '' + i + '.html',  
                        url: 'pages/' + i + '.html',  
                        extras: {}  
                    })  
                }  

                var currentId = plus.webview.currentWebview().id;  
                var group = new webviewGroup(currentId, {  
                    items: items,  
                    onChange: function(obj) {  
                        var c = document.querySelector(".mui-control-item.mui-active");  
                        if(c) {  
                            c.classList.remove("mui-active");  
                        }  
                        document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");  
                    }  
                });  

                mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {  
                    var wid = this.getAttribute("data-wid");  
                    group.switchTab(wid);  
                });  
            });
757682793@qq.com

757682793@qq.com - 90后大学生

大神,有这实例完整的源代码吗

jzs@qq.com

jzs@qq.com

哥,我也遇到了同样的问题,请问您是如何解决的?

要回复问题请先登录注册