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,虽说大家都知道这两种方式大概运作方式,但想必有实操的人不会太多. 这里是自己实操两种持久化方式的一点点记录. 先看以 ...
随机推荐
- springboot使用dubbo和zookeeper
2019-11-17 yls 创建服务接口模块 接口工程只提供接口,不提供实现,在后面的提供者和消费者中使用 在使用接口的模块中只需要写具体实现类,避免了在每个模块中重复编写接口 在接口中引入依赖包 ...
- （Codeforce）The number of positions
Petr stands in line of n people, but he doesn't know exactly which position he occupies. He can say ...
- echo -e的扩展应用之颜色控制输出（字体+背景）
echo -e 输出带颜色字体或者背景用法:example: echo -e "\033[41;36m something here \033[0m" 其中41的位置代表底色, 3 ...
- Zabbix-(五)监控Docker容器与自定义jvm监控项
Zabbix-(五)监控Docker容器与自定义jvm监控项 一.前言 前文中讲述了Zabbix对服务器硬件方面的监控功能,本文将讲述利用Zabbix监控Docker容器中的Java Web服务,并通 ...
- JQury自动切换图片
[标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- pandas dataframe重复数据查看.判断.去重
本文详解如何使用pandas查看dataframe的重复数据,判断是否重复,以及如何去重 dataframe数据样本: import pandas as pd df = pd.DataFrame({' ...
- 【2018寒假集训Day 8】【并查集】并查集模板
Luogu并查集模板题 #include<cstdio> using namespace std; int z,x,y,n,m,father[10001]; int getfather(i ...
- [UWP]UIElement.Clip虽然残废，但它还可以这样玩
1. 复习一下WPF的UIElement.Clip 用了很久很久的WPF,但几乎没有主动用过它的Clip属性,我只记得它很灵活,可以裁剪出多种形状.在官方文档复习了一下,大致用法和效果如下: < ...
- Java8 Stream中间操作使用详解
前面两篇简单的介绍了Stream以及如何创建Stream,本篇就给大家说说stream有哪些用途,以及具体怎样使用. 再次介绍Stream Stream 使用一种类似用于SQL 语句从数据库查询数据的 ...
- Codeforces Round #452 (Div. 2) A B C
Codeforces Round #452 (Div. 2) A Splitting in Teams 题目链接: http://codeforces.com/contest/899/problem/ ...