mui 顶部选项卡的两种切换方式

第一种main页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Hello MUI</title>

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.min.css">

    </head>

    <body>

        <div class="mui-content">

            <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="direction.html" data-wid="tab-top-subpage-1.html">

                            推荐

                        </a>

                        <a class="mui-control-item" href="day_rank.html" data-wid="tab-top-subpage-2.html">

                            热点

                        </a>

                    </div>

                </div>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>

        <script>

            mui.init();

            mui.plusReady(function() {

                var group = new webviewGroup("direction.html", {

                    items: [{

                        id: "direction.html",   //这是子页1的路径

                        url: "direction.html",

                        extras: {}

                    }, {

                        id: "day_rank.html",    //这是子页2的路径

                        url: "day_rank.html",

                        extras: {}

                    }],

                    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("href");

                    group.switchTab(wid);

                });

            });

            mui.back = function() {

                var _self = plus.webview.currentWebview();

                _self.close("auto");

            }

        </script>

    </body>

</html>

index 页面

 <script src="js/mui.min.js"></script>

    <script type="text/javascript">

        mui.init({

            subpages:[{                //下边是初始化，然后这个页面显示我们将插入的页面

                url:"main.html",

                id:"main.html",

                styles:{

                    top:"50px",

                    bottom:"0px"

                }

            }]

        });

    </script>

下面是第二种方式通过JS来实现页面内嵌（缺陷，每次点击都会更行）

main页面

<!doctype html>

<html lang="en" style='height:100%'>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="css/mui.css"/>

</head>

<body>

<div class="mui-content">

		<div class="mui-segmented-control"style="width:90%;text-align: center;">

		    <a class="mui-control-item mui-btn-warning mui-active mui-btn-outlined" href="day_rank.html">选项卡1</a>

		    <a class="mui-control-item mui-btn-warning mui-btn-outlined" href="direction.html">选项卡2</a>

		</div>

		</div>

</div>

</body>

<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">

	mui.init();

	//设置默认打开首页显示的子页序号；

	var Index=0;

	//把子页的路径写在数组里面

	var subpages = ['day_rank.html','direction.html'];

	//所有的plus-*方法写在mui.plusReady中或者后面。

	mui.plusReady(function() {

	//获取当前页面所属的Webview窗口对象

	var self = plus.webview.currentWebview();

	for (var i = 0; i < subpages.length; i++) {

	//创建webview子页

	var sub = plus.webview.create(

	subpages[i], //子页url

	subpages[i], //子页id

	{

	top: '500px',//设置距离顶部的距离

	bottom: '100px'//设置距离底部的距离

	}

	);

	//如不是我们设置的默认的子页则隐藏，否则添加到窗口中

	if (i != Index) {

	sub.hide();

	}

	//将webview对象填充到窗口

	self.append(sub);

	}

	});

	//当前激活选项

	var activeTab = subpages[Index],title=document.querySelector(".mui-title");

	//选项卡点击事件

	mui('.mui-segmented-control').on('tap', 'a', function(e) {

	//获取目标子页的id

	var targetTab = this.getAttribute('href');

	if (targetTab == activeTab) {

	return;

	}

	//更换标题

//	title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

	//显示目标选项卡

//获取当前窗口对象

       var self=plus.webview.currentWebview();

      //如果是第一个页面那么选择 第一个页面的样式 第一个页面底部有选项卡

      if(targetTab==subpages[0]){

          //主页面 index_style

      var sub=plus.webview.create('day_rank.html','day_rank.html',{top:'500px',bottom:'0px'});

      }else{

          //主页面 其余页面的样式 subpage_style

      var sub=plus.webview.create('direction.html','direction.html',{top:'500px'});

       }

      //把子页面添加到当前窗口对象里

       self.append(sub);

       //关闭当前窗口里面已经展示的页面

       plus.webview.hide(activeTab);

       //要打开的页面赋值给当前页面留着下次使用

       activeTab=targetTab;

	});

    document.getElementById('newslist').addEventListener("tap",function(){

      	mui.openWindow('direction.html','direction.html',{

		      		styles:{

		      			top:'0px',

		      			bottom:"50px"

		      		},

		      		})

      	})

</script>

</html>

巴特西

mui 顶部选项卡的两种切换方式

最新文章

热门文章