MUI-底栏实现-页面切换

MUI-底栏实现-页面切换:通过“窗口管理”和“事件”来实现页面切换的效果。
界面展示:
在这里插入图片描述
第一步:底部选项卡制作

<nav class="mui-bar mui-bar-tab myfooter">
	<!-- 在移动端app开发的过程中,不使用href做跳转工作,因为平时浏览网页的时候,通过超链接跳转网页,有一个加载的过程,
	而在此过程中有一段转场空白,这在APP中是非常不友好的。 -->
	<!-- mui-active 激活元素,点击的时候会变成蓝色,并且自动添加出mui-active -->
	<a class="mui-tab-item mui-active" id="btn" href="home.html">
	    <span class="mui-icon icon iconfont icon-zhifubao"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="wealth.html">
		<span class="mui-icon icon iconfont icon-caifu"></span>
		<span class="mui-tab-label">财富</span>
	</a>
	<a class="mui-tab-item" href="praise.html">
		<span class="mui-icon icon iconfont icon-koubei"></span>
		<span class="mui-tab-label">口碑</span>
	</a>
	<a class="mui-tab-item" href="friends.html">
		<span class="mui-icon icon iconfont icon-pengyou"></span>
		<span class="mui-tab-label">朋友</span>
	</a>
	<a class="mui-tab-item" href="mine.html">
	    <span class="mui-icon icon iconfont icon-31wode"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>

第二步:窗口对象设置

// 第二步:窗口对象设置。首先定义一个数组,把所有页面的html的名字存储下来
var subpage = ["home.html","wealth.html","praise.html","friends.html","mine.html"];
// 添加页面:得到当前页面的窗口对象,再得到另外五个页面的窗口对象,最后使用一个append方法将其添加进来即可
mui.plusReady(function () {
	// 先得到当前页面的窗口对象
	var currentWebview = plus.webview.currentWebview();
    for(var i= 0;i < 5;i++){
		// 将五个页面对应的窗口对象都创建出来
		var sub = plus.webview.create(subpage[i],subpage[i],{
			top:"50px",
			bottom:"50px"
		});
		// 将子窗口对象添加到当前页面窗口对象中
		currentWebview.append(sub);
		// 令打开APP首次展示的是首页,即subpage[0],若不加判断,则展示的是subpage[4]
		if(i > 0){
			sub.hide();
		}
	}
});

第三步:点击事件处理

// 第三步:事件处理。点击底部按钮,其实就是点击不同的超链接元素,切换不同的元素显示和隐藏。
// 首先,给超链接元素绑定事件,针对不同的href,显示/隐藏不同的webview
mui(".myfooter").on("tap","a",function(){
	// alert(this.href);
	var currentActiveTab = this.getAttribute("href");
	if(currentActiveTab == mui(".mui-active")[0].getAttribute("href")){
		return; 
	};
	plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏
	plus.webview.show(currentActiveTab); // 显示
});

相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值(打开新的子页面)
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包,一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车

  • 5
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值