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,虽说大家都知道这两种方式大概运作方式,但想必有实操的人不会太多. 这里是自己实操两种持久化方式的一点点记录. 先看以 ...
随机推荐
- EXISTS的用法介绍
比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID ...
- Ubuntu 18 安装搜狗输入法
Ubuntu 18 安装搜狗输入法: 1. 搜狗输入法官网下载对应的Linux输入法 2. 双击 刚刚下载好的 deb 文件 3. 点击 install(安装) 4. 在 settings(系统设置) ...
- codeblocks 调试
codeblocks 调试工具使用的注意事项: 1.codebloccks 调试,必须要在一个项目下才可以,也就是说“单独的文件是不能运行debug工具的” 2.项目的目录文件名必须是全英文,同时文件 ...
- CMake 常用函数记录
1.cmake_minunum_required(VERSION 2.6) #cmake 最低要求版本号 2.PROJECT(projectname [CXX] [C] [Java]) #这个指令隐式 ...
- 领扣（LeetCode）最大连续1的个数 个人题解
给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3. 注意: 输入的数组 ...
- opencv 3 core组件进阶(2 ROI区域图像叠加&图像混合；分离颜色通道、多通道图像混合；图像对比度，亮度值调整）
ROI区域图像叠加&图像混合 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp&g ...
- PostGIS mysql_fdw安装（Linux）
##本人在安装过程中,可能因为系统环境因素或是其他原因,参考网上的文章没有一篇是非常顺利的,所以自己总结一下. ##安装过程中非常坎坷,有些地方反复了好几次,弄的有点模糊,但模糊的地方在文中我会指出. ...
- 2019-10-16：渗透测试，基础学习,burpsuit笔记
maccms10后门分析下载网址,是假官网http://www.maccmsv10.com/download.htmlMaccms10基于php+mysql的maccms,是苹果的内容管理,方便使用, ...
- （四十六）golang--网络编程（简易的聊天系统）
Go主要的目标之一就是面向大规模后端服务程序,网络通信这块是服务端程序必不可少也是至关键的一部分. 网络编程有两种: (1)TCP Socket编程:是网络编程的主流,之所以叫TCP Socket编程 ...
- 12、pytest -- 缓存：记录执行的状态
目录 1. cacheprovider插件 1.1. --lf, --last-failed:只执行上一轮失败的用例 1.2. --ff, --failed-first:先执行上一轮失败的用例,再执行 ...