mui 顶部选项卡的两种切换方式
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 顶部选项卡的两种切换方式的更多相关文章
- Android中Fragment与Activity之间的交互（两种实现方式）
(未给Fragment的布局设置BackGound) 之前关于Android中Fragment的概念以及创建方式,我专门写了一篇博文<Android中Fragment的两种创建方式>,就如 ...
- JavaScript 函数的两种声明方式
1.函数声明的方式 JavaScript声明函数有两种选择:函数声明法,表达式定义法. 函数声明法 function sum (num1 ,num2){ return num1+num2 } 表达式定 ...
- Windows校验文件哈希hash的两种常用方式
大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像 ...
- Java使用SFTP和FTP两种连接方式实现对服务器的上传下载 【我改】
[]如何区分是需要使用SFTP还是FTP? []我觉得: 1.看是否已知私钥. SFTP 和 FTP 最主要的区别就是 SFTP 有私钥,也就是在创建连接对象时,SFTP 除了用户名和密码外还需要知道 ...
- java的两种同步方式， Synchronized与ReentrantLock的区别
java在编写多线程程序时,为了保证线程安全,需要对数据同步,经常用到两种同步方式就是Synchronized和重入锁ReentrantLock. 相似点: 这两种同步方式有很多相似之处,它们都是加锁 ...
- android带有文字的图片按钮的两种实现方式
android带有文字的图片按钮的两种实现方式 1). TextView对Button用相对布局,这要要求按钮的背景图片要留下空白位置给文字.这种方式开发比较简单,适合做一些风格一致的Button. ...
- 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解
1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...
- Linux 下wdcp支持两种安装方式
wdcp支持两种安装方式1 源码编译 此安装比较麻烦和耗时,一般是20分钟至一个小时不等,具体视机器配置情况而定2 RPM包安装 简单快速,下载快的话,几分钟就可以完成源码安装(ssh登录服务器,执行 ...
- 探究Redis两种持久化方式下的数据恢复
对长期奋战在一线的后端开发人员来说,都知道redis有两种持久化方式RDB和AOF,虽说大家都知道这两种方式大概运作方式,但想必有实操的人不会太多. 这里是自己实操两种持久化方式的一点点记录. 先看以 ...
随机推荐
- 在react中配置less
在创建项目之后执行 $ yarn eject 抽离配置文件 会多出config和script文件夹 接下来安装less yarn add less less-loader 或者 npm install ...
- 破解微擎安装，免费搭建微擎，免费破解微擎，微擎破解版本，最新版本V2.1.2，一键安装！！
微擎是一款基于WEB2.0(PHP+Mysql)技术架构,免费开源的公众平台管理系统,一款致力于将小程序和公众号商业化.智慧化.场景化的自助引擎.微擎提供公众号.微信小程序.支付宝小程序.百度熊掌 ...
- mysql中 drop、truncate和delete的区别
mysql中drop.truncate和delete的区别 (1)DELETE语句执行删除的过程是每次从表中删除一行,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作. TRUNC ...
- 领扣（LeetCode）找树左下角的值 个人题解
给定一个二叉树,在树的最后一行找到最左边的值. 示例 1: 输入: 2 / \ 1 3 输出: 1 示例 2: 输入: 1 / \ 2 3 / / \ 4 5 6 / 7 输出: 7 注意: 您可以假 ...
- objc反汇编分析__strong和__weak
如题所说反汇编看__strong和__weak的真实样子,代码列举自然多,篇幅长不利于阅读,我就先搬出结论,后面是分析. 在NON-ARC环境,__strong和__weak不起作用.相反在ARC环境 ...
- ASP使用ajax来传递中文参数的编码处理
背景 asp的第一版是0.9测试版,自从1996年ASP1.0诞生,迄今20余载.虽然asp在Windows2000 IIS服务5.0所附带的ASP 3.0发布后好像再没有更新过了,但是由于其入手简单 ...
- LoadRunner 录制问题集锦
关键词:各路录制小白汇集于此 虽然知道君对录制不感冒,但总是看到扎堆的人说这些问题,忍不住要站出来了. 百度虽好,帮助了很多小白,但关键是百度并没有排除错误内容,经过历史的几年传播,错的都快变对的了, ...
- linux系统资源查看常用命令
1.vmstat vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.IO读写.CPU活动等进行监视.它是对系统的整体情况进行统计, ...
- mysql中运用条件判断筛选来获取数据
### part1 单表查询 sql查询完整语法: select .. from .. where .. group by .. having .. order by .. limit .. 一.wh ...
- Spring Boot整合Mybatis报错InstantiationException: tk.mybatis.mapper.provider.base.BaseSelectProvider
Spring Boot整合Mybatis时一直报错 后来发现原来主配置类上的MapperScan导错了包 由于我使用了通用Mapper,所以应该导入通用mapper这个包