效果

821AB31C-DAD4-4748-9792-3E546E3422DE.png

A66295E0-B6BB-4FDB-B3B0-4DB138E34693.png

FD024B21-7E76-4043-8DA6-8008A560C9DD.png

代码:

<div class="mui-inner-wrap">
            <header class="mui-bar mui-bar-nav">
                <div class="mui-segmented-control" style="margin:-4px 100px 0px 100px;align-content: center;align-self: center; ">
                    <a class="mui-control-item mui-active" id="mine">我的</a>
                    <a class="mui-control-item" id="discory">发现</a>
                    <a class="mui-control-item" id="dynamic">动态</a> 
                </div>
            </header>
         </div>

初始化显示"我的"

mui.init(
            {
                subpages:[
                {
                    url:"chat/list.html",
                    id:"contentHtml",
                    styles:{
                         top:'45px',//mui标题栏默认高度为45px；
                         bottom:'0px'//默认为0px，可不定义；
                    }
                }]
            });

添加监听事件,点击segmented-item切换子页面

mui.plusReady(function(){
                //给标签为 mine 的元素（也就是我们的我的 tab ）添加 tap 事件，这里由于 click 的延迟太高，故用 tap 事件。    
                document.getElementById("mine").addEventListener('tap',function(){
                    //获取到当前的 webview 根据标签也就是下面定义的子页面 id
                    var cur = plus.webview.getWebviewById("contentHtml");
                    //判断是否是此页面
                    if(cur.getURL() != "chat/list.html")
                    {
                        //不是就要切换页面为当前 tab 是指向的页面
                        cur.loadURL("chat/list.html"); 
                    }
                });
                
                document.getElementById("discory").addEventListener('tap',function(){
                    var cur = plus.webview.getWebviewById("contentHtml");
                    if(cur.getURL() != "chat/discory.html")
                    {
                        cur.loadURL("chat/discory.html"); 
                    }
                });
                
                document.getElementById("dynamic").addEventListener('tap',function(){
                    var cur = plus.webview.getWebviewById("contentHtml");
                    if(cur.getURL() != "chat/dynamic.html")
                    {
                        cur.loadURL("chat/dynamic.html");
                    }
                }); 
            });