MUI tab选项卡之间的切换和数据获取

查看mui官网上面的例子,会看到有多种tab 选项卡的例子,我就写下我用到的tab选项卡。写了个简单的例子,效果如下图





主页面的代码

	            <nav class="mui-bar mui-bar-tab"><a class="mui-tab-item mui-active" href="main.html"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item" href="main2.html"><span class="mui-icon mui-icon-phone"></span><span class="mui-tab-label">电话</span></a><a class="mui-tab-item" href="message.html"><span class="mui-icon mui-icon-star"></span><span class="mui-tab-label">功能</span></a><a class="mui-tab-item"><span class="mui-icon mui-icon-email"></span><span class="mui-tab-label">邮件</span></a><a class="mui-tab-item"><span class="mui-icon mui-icon-gear"></span><span class="mui-tab-label">设置</span></a></nav>

js 代码

	(function () {//初始化mui.init();var subpages = ['main.html', 'main2.html', 'message.html'];var subpage_style = {top: '0px',bottom: '51px'};//创建子页面,首个选项卡页面显示,其它均隐藏;mui.plusReady(function() {var self = plus.webview.currentWebview();for(var i = 0; i < 1; i++) { // 如果i等于所有的子页面的话,那么子页面的js都会去执行var temp = {};var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);if(i > 0) {sub.hide();} self.append(sub);}});var activeTab = subpages[0];//选项卡点击事件mui('.mui-bar-tab').on('tap', 'a', function(e) {var targetTab = this.getAttribute('href');console.log(targetTab)if (targetTab == activeTab) {return;}var self = plus.webview.currentWebview();var sub = plus.webview.create(targetTab, targetTab, subpage_style);self.append(sub);
//					//隐藏当前;plus.webview.hide(activeTab);//这里应该是关闭页面,不知道隐藏与关闭区别有多大
//					//更改当前活跃的选项卡activeTab = targetTab;});})()





本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ECharts 联动效果

在使用ECharts 时候要用到联动的&#xff0c;比如下面的示例图&#xff0c;当鼠标经过A的图的时候&#xff0c;这个时候有提示&#xff0c;然后让B的提示也显示出来。这样一个效果。 官方文档给的配置项&#xff0c; http://echarts.baidu.com/api.html#echarts.connect var my…

Git Permission to fazhiyun86/Test.git denied to MarRoar

先说明问题。在我的电脑上有两个SSH key&#xff0c;也就是有两个GitHub账户。我们在GitHub账户里面配置好 SSH key 的时候&#xff0c;就可以向自己的GitHub账户的仓库里面push 代码。 我们先在第一个账户push 代码的时候会让输入 用户名和密码。当向另一个账户push 东西的时…

ECharts 饼图 legend 样式修改

在移动端展示一个数据很多的饼图的时候&#xff0c;首先看一下效果。ECharts legend 配置项 1 legend 让它在右面竖着显示。 legend: {type: scroll,orient: vertical,show: true,right: 0,top: 20,bottom: 20,textStyle: {fontSize: 7},formatter: function (name) {return (n…

ECharts 仪表盘的轴线宽度修改

今天修改仪表盘的轴线宽度&#xff0c; 配置项链接。修改的是下图中线框标注地方的宽度。 下面看一下配置项 option {tooltip : {formatter: "{a} <br/>{b} : {c}%"},toolbox: {feature: {restore: {},saveAsImage: {}}},series: [{name: 业务指标,type: gau…

CSS 让数字滑动显示

最近在做一个数据展示的页面&#xff0c;老板想要的效果是数字滑动的显示。 所以想了一下实现了老板想要的效果。代码如下。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>number</title><…

Status Code:200 OK (from disk cache)和304的区别,以及怎么禁止缓存

有时候缓存是 200 OK (from disk cache)有时候会是 304 ? 看运维是否移除了 Entity Tag。移除了&#xff0c;就总是 200 OK (from cache)。没有移除&#xff0c;就两者交替出现。 他们两个的区别是 200 OK (from disk cache) 是浏览器没有跟服务器确认&#xff0c; 就是它直接…

js 排序

冒泡排序 var dataStore [ 72 , 1 , 68 , 95 , 75 , 54 , 58 , 10 , 35 , 6 , 28 , 45 , 69 , 13 , 88 , 99 , 24 , 28 , 30 , 31 , 78 , 2 , 77 , 82 , 72 ];var t bubbleSort(dataStore);console.log(t);function bubbleSort(data) {var temp 0;for (var i 0; i < dat…

js 类型判断

说到js的类型判断很容易想到的是 typeof、instanceof等。 typeof 有个缺点就是引用类型的结果值都是object 所以就要说一下这些类型是怎么判断的。在说类型判断之前先介绍个东西 Object.prototype.toString 可以查看链接 翻译过来就是 当 toString 方法被调用的时候&#xf…

cordova报错“No installed build tools found. Install the Android build tools version - ”

在cordova 里面添加一个安卓平台后&#xff0c;用android studio打开安装gradle后&#xff0c;然后开始构建项目&#xff0c;这个时候在控制台上会报错 这个时候看到对应的文件下报错信息。 然后我们打开这个文件后&#xff0c; 发现这个 if else 判断走了 else 里面的代码&a…

Vim 常用命令总结

vi 命令编辑器有三种模式&#xff1a;命令模式&#xff0c;编辑模式和末行模式。 命令模式&#xff1a;键盘的任意一个键都可以当成“编辑命令”。 编辑模式&#xff1a;键盘的任意一个键都当成“文本内容”。 末行模式&#xff1a;键盘的任意一个键都当成“文本管理命令”。…

Python数据结构与算法(四)--顺序表

顺序表 在程序中&#xff0c;经常需要将一组&#xff08;通常是同为某个类型的&#xff09;数据元素作为整体管理和使用&#xff0c;需要创建这种元素组&#xff0c;用变量记录它们&#xff0c;传进传出函数等。一组数据中包含的元素个数可能发生变化&#xff08;可以增加或删…

Python数据结构与算法(五)--链表

链表 链表的定义: 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是不像顺序表一样连续存储数据&#xff0c;而是在每一个节点&#xff08;数据存储单元&#xff09;里存放下一个节点的位置信息&#xff08;即地址…

Python数据结构与算法(六)--栈和队列

栈和队列 栈&#xff08;stack&#xff09;&#xff0c;有些地方称为堆栈&#xff0c;是一种容器&#xff0c;可存入数据元素、访问元素、删除元素&#xff0c;它的特点在于只能允许在容器的一端&#xff08;称为栈顶端指标&#xff0c;英语&#xff1a;top&#xff09;进行加…

Python排序算法(一)冒泡排序、选择排序、插入排序

今天总结一下Python中的排序算法。这篇文章有的排序算法是&#xff1a;冒泡排序、选择排序、插入排序。 冒泡排序 先看一下代码。 冒泡排序 def bubble_sort(aList):n len(aList)for i in range(0, n - 1):for j in range(0, n - i - 1):if aList[j] > aList[j 1]:aList…

Python排序算法(二) 快速排序、希尔排序、归并排序

这篇文章有的排序算法是&#xff1a;快速排序、希尔排序、归并排序。 快速排序 快速排序 def quick_sort(aList, first, last):if first > last:returnmin_val aList[first]low_index firsthight_index lastwhile low_index < hight_index:# hight 左移动while low_i…

python二分法查找

常见的搜索方法&#xff1a;顺序查找、二分法查找、二叉树查找、哈希查找。 二分法查找 二分查找又称折半查找&#xff0c;优点是比较次数少&#xff0c;查找速度快&#xff0c;平均性能好&#xff1b;其缺点是要求待查表为有序表&#xff0c;且插入删除困难。因此&#xff0…

【Python学习笔记】Python深拷贝和浅拷贝

Python中copy模块里面常用的两个方法copy.copy() 和copy.deepcopy()也就是浅拷贝和深拷贝 1、copy.deepcopy() 深拷贝&#xff0c;是对于一个对象所有层次的拷贝。 2、copy.copy()浅拷贝&#xff0c;一般来说是对最顶层对象的拷贝。另外浅拷贝对不可变类型&#xff08;如&…

Python装饰器(一)

要学习装饰器&#xff0c;首先要知道闭包的东西。不过这里不再说闭包的东西了。 我们假设一个场景&#xff1a;假如在公司有多个开发部门&#xff0c;A、B....。现在A部门开发出了一个功能&#xff0c;然后其他部门去调用A部门开发的功能。 比如: 如下f1、f2...&#xff0c;是…

Python装饰器(二)

想再说一下装饰器的使用和原理。 之前已经说了装饰器的概念&#xff0c;和语法&#xff0c;这里想再进一步说一下几个装饰器的例子。 例子一&#xff1a; def makBlod(fn):def wrappen():return "<b>" fn() "</b>"return wrappendef makI…

Chrome浏览器隐藏扩展插件图标

隐藏Chrome浏览器扩展插件的图标。 隐藏之后 把鼠标移动到 上面显示那个红色的位置就可以拖动鼠标&#xff0c;然后就可以隐藏了。