mui segmented用法

效果

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

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

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

代码:

            

                

                    我的
                    发现
                    动态 
                
            
         

初始化显示"我的"

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