MUI底部选项卡链接跳转不了

问题描述:

用MUI例子中的选项卡,底部的导航只能实现div切换,链接无法跳转。

查看控制台,输出:Unable to preventDefault inside passive event listener due to target 的警告。

问题解决:

经检查相关资料,加入以下代码,即可解决问题。

mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});

问题原因:

MUI在选项卡中的文字中已说明:

通过DIV模拟一个独立页面,通过DIV的显示、隐藏模拟不同页面的切换,典型的SPA模式;

所以默认的选项卡只适用于页面内多个div切换显示,如要做页面跳转,则需要加javaScript代码修改浏览器地址。

手机版加入代码:

mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});

电脑版加入代码:

mui(‘body‘).on(‘click‘,‘a‘,function(){document.location.href=this.href;});

引申:

为什么手机中要用trap,而不和电脑一样的click事件。

首先两者都会在点击时触发,但是在手机web端,click会有 200~300 ms,所以请用tap代替click作为点击事件。但在本次问题中,在手机web端使用click,也能实现跳转,并无影响

时间: 2024-10-08 10:44:20

MUI底部选项卡链接跳转不了的相关文章

MUI底部导航栏切换效果

首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/home.html" class="mui-tab-item mui-active" id="defaultTab"> <span class="mui-icon iconfont icon-shouye"></span

MUI组价五:开关、底部选项卡、9宫格和分页

1.switch(开关) mui提供了开关控件,点击滑动两种手势都可以对开关控件进行操作,UI如下:默认开关控件,带on/off文字提示,打开时为绿色背景,基本class类为.mui-switch..mui-switch-handle,DOM结构如下: <div class="mui-switch"> <div class="mui-switch-handle"></div> </div> 若希望开关默认为打开状态,只

HTML5 开发APP(头部和底部选项卡)

我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面,通过mui来实现切换功能. 在index的html部分写下这样的代码 <body> <header class="mui-bar mui-bar-nav" style="padding-right: 15px;background: #00be68;"

Mui 底部导航切换

1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="html/home1.html"> <span class="mui-icon mui-icon-home"></span> <span c

主攻ASP.NET.4.5.1 MVC5.0之重生:政府行政网站常用友情链接跳转javascript[干货分享]

<!-----------------------------------> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_jumpMenu(targ, selObj, restore) { //v3.0 window.open(selObj.options[selObj.selectedIndex].value); if (restore)

页面链接跳转方法

一.window.location.href 是实现页面链接跳转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器对象</title> <style> div{ width: 500px; margin:0 auto; } </style> </head> <

FragmentTabHostBottomDemo【FragmentTabHost + Fragment实现底部选项卡】

版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 使用FragmentTabHost实现底部选项卡效果. 备注:该Demo主要是演示FragmentTabHost的一些设置和部分功能,实际中需要参考其他Demo. 效果图 代码分析 1.该Demo中采用的是FragmentTabHost的布局方案之一[命名为非常规布局写法]:[建议使用常规布局写法,见<FragmentTabHostTopDemo[FragmentTabHost固定宽度且居中]>] 2.未使用自定义的FragmentT

TabLayoutBottomDemo【TabLayout实现底部选项卡】

版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 使用TabLayout实现底部选项卡切换功能. 效果图 代码分析 1.演示固定模式的展现 2.演示自定义布局的实现 使用步骤 一.项目组织结构图 注意事项: 1.  导入类文件后需要change包名以及重新import R文件路径 2.  Values目录下的文件(strings.xml.dimens.xml.colors.xml等),如果项目中存在,则复制里面的内容,不要整个覆盖 二.导入步骤 引入依赖库 在APP的build.gra

vue2.0中使用mint ui做底部选项卡切换

首先在vue2.0中webpack中下载 mint ui 然后再main.js引入 这样就可以使用mint ui里面的布局组件了html部分(就是你要使用底部选项卡的部分) <!--底部选项卡--><mt-tab-container v-model="selected"> <mt-tab-container-item id="one"> one </mt-tab-container-item> <mt-tab-c