mui底部导航-基于webview模式
来源:互联网 发布:五月天车祸现场知乎 编辑:程序博客网 时间:2024/06/06 01:15
自己最近在用MUI做app期间,首页想做一个基于webview模式的底部导航,在百度上找了一个例子,但是这个例子有一个问题,最后自己也抛弃了,换一个方式实现,原本mui提供了方案,但是最新版的已经不存了,只剩下如下两种方式实现:
div模式,说白了就是一个页面写多个页面的html代码,通过隐藏显示来切换,只能适用于一些业务逻辑简单的情景,第二种不适用我的需求,也放弃。所以自己根据官方文档和他人的博客,自己完成这个的功能。
HTML代码:通过HBuilder编译器的mt快捷键,生成如下导航栏:
<nav class="mui-bar mui-bar-tab" id="nav"><a class="mui-tab-item mui-active" id="0"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item" id="1"><span class="mui-icon mui-icon-paperplane"></span><span class="mui-tab-label">热点</span></a><a class="mui-tab-item" id="2"><span class="mui-icon mui-icon-compose"></span><span class="mui-tab-label">阅历</span></a><a class="mui-tab-item" id="3"><span class="mui-icon mui-icon-chat"></span><span class="mui-tab-label">消息</span></a><a class="mui-tab-item" id="4"><span class="mui-icon mui-icon-person"></span><span class="mui-tab-label">我的</span></a></nav>设置五个a标签的id,从0到4,然后写js代码,将代码写在mui.plusReady中,在页面加载完成后才执行里面的业务逻辑
mui.plusReady(function() {//设置默认打开首页显示的子页序号var Index = 0;//把子页面路径写在数组里面var subpages = ['home.html', 'hotspot.html', 'experience.html', 'news.html', 'mine.html']//获取当前页面所属的Webview窗口对象var self = plus.webview.currentWebview();for(var i = 0; i < 5; i++) {//创建webview子页var sub = plus.webview.create(subpages[i], //子页urlsubpages[i], //子页id{top: '0px',bottom: '44px',scrollIndicator: "none" //隐藏滚动条});//如果不是我们设置的子页就隐藏if(i != Index) {sub.hide()}//将webview对象填充到窗口self.append(sub)}//当前激活选项var activeTab = subpages[Index]var targetTab;mui('.mui-bar-tab').on('tap', 'a', function(e) {//获取子页面的idvar j = this.getAttribute('id')targetTab = subpages[j]if(activeTab == targetTab) {return}//显示目标选项卡plus.webview.show(targetTab)//隐藏当前选项卡plus.webview.hide(activeTab)//更改当前活跃选项卡activeTab = targetTab})})然后创建五个页面,将页面地址存入subpages数组中,然后循环创建webview子页面,将生成的五个webview子页面对象填充到窗口中,然后监听a标签的点击事件,获取点击
的a标签的id,通过坐标获取数组中的页面地址,然后显示目标选项卡,隐藏当前选项卡。这样便完成底部导航-基于webview模式,在子页面中可以完成比较复杂的子页面操作和子页面的上拉加载下拉刷新等。
阅读全文
0 0
- mui底部导航-基于webview模式
- mui底部导航
- [webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02
- [webAPP项目]基于MUI框架webAPP之头部导航与底部导航制作详解02
- mui 底部导航菜单功能(原创)
- mui底部导航栏点击切换图片和颜色
- [MUI框架]-滑动侧边栏-webview模式
- android基于Fragment实现底部导航切换
- MUI的webview模式-缩放式侧滑(类手机QQ)
- mui初级入门教程(二)— html5+ webview 底部栏用法详解
- mui底部tab代码
- MUI,webview选项卡
- 底部导航
- mui 沉浸式导航
- Android仿小米商城底部导航栏(基于BottomNavigationBar)
- 基于Agile Lite开发框架实现底部导航切换页面
- MUI底部选项卡分类
- mui底部不动的按钮
- bzoj3261 最大异或和【可持久化trie树】
- JAVA 四 流程控制
- Android权限动态申请
- 机器学习实战-AdaBoost-python代码
- 如何用jquery获取input输入框中的值?
- mui底部导航-基于webview模式
- 杭电acm 1052 田忌赛马
- Ruby on rails初体验(三)
- CSDN-markdown编辑器-帮助
- Matlab 和 Simulink 教程学习基础入门
- Zabbix agent安装部署及连接proxy
- JAVA 五 while循环结构练习
- ORA-00445: 后台进程 "J001" 在 120 秒之后仍没有启动的解决方法
- amr转成mp3步骤