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


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

    ps:自己也不确定有多少了到航头,页面怎么办,到航头从后台获取,页面不可能建N多个.html

    <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);  
                    });  
                });

    在滚动过程中,item数组里有三个参数

    id: "",
    url: "",
    extras: {}

    第一个参数 id 是我们主要用来切换的,获取到的 data-wid 与id 对比并跳转 url   

    mui webview如何取消左右滑动切换页面

    将源码包webviewGroup.js中的'moveMode':'followFinger'注掉或者删除即可。

    大概在115行。

  • 相关阅读:
    mac下的一个类似“_kbhit()”实现
    mac使用备注
    open()打开文件失败对应的各种错误码
    xcode显示行号show gutter
    下载google code中源码的几个工具
    HTML5迷你游戏作验证码
    Linux+eclipse+gdb调试postgresql源码
    S-Nim
    【求助】从大表中删除小表中存在的记录问题
    Binary Tree Zigzag Level Order Traversal (LeetCode) 层序遍历二叉树
  • 原文地址:https://www.cnblogs.com/li-sir/p/11561608.html
Copyright © 2020-2023  润新知