mui顶部选项卡问题。并没能达到效果,请大神指教

<!doctype html>

<head>
    <meta charset="utf-8">
    <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="#item1mobile" data-wid="movie_home.html">推荐</a>
                    <a class="mui-control-item" href="#item2mobile" data-wid="TV_play.html">电视剧</a>
                    <a class="mui-control-item" href="#item3mobile" data-wid="top_movie.html">电影</a>
                    <a class="mui-control-item" href="#item4mobile" data-wid="top_variety.html">综艺</a>
                    <a class="mui-control-item" href="#item5mobile" data-wid="top_entertainment.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("top_tab.html", {
                items: [{
                    id: "movie_home.html", //这是子页1的路径
                    url: "movie_home.html",
                    extras: {}
                }, {
                    id: "TV_play.html", //这是子页2的路径
                    url: "TV_play.html",
                    extras: {}
                }, {
                    id: "top_movie.html", //这是子页2的路径
                    url: "top_movie.html",
                    extras: {}
                }, {
                    id: "top_variety.html", //这是子页2的路径
                    url: "top_variety.html",
                    extras: {}
                }, {
                    id: "top_entertainment.html", //这是子页2的路径
                    url: "top_entertainment.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("data-wid");
                group.switchTab(wid);
            });

        });
        mui.back = function() {
            var _self = plus.webview.currentWebview();
            _self.close("auto");
        }
    </script>
</body>


图片说明

0

1个回答

是要个什么效果啊,没懂ε=(´ο`*)))唉

0
AYWQHHD
AYWQHHD 想要的效果是,滑动的选项卡,可以跳转到页面上,就像腾讯视频那种,滑动或者点击可以到指定页面,但是现在页面全部写好了。但是顶部选项卡的样式,功能都没有出来,滑动不了,点击也不能跳转到指定页面。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
mui框架之div顶部选项卡动态加载不能切换问题
需要在数据加载完成后,初始化 :  var gallery = mui('.mui-slider');                 gallery.slider().gotoItem(0);                        function chushihua(){                 var gallery = mui('.mui-slider');      ...
微信小程序----导航栏选项卡(MUI顶部选项卡)
DEMO下载 效果图 WXML import src=&amp;amp;quot;../../template/list.wxml&amp;amp;quot;/&amp;amp;gt; view class=&amp;amp;quot;tui-tabbar-content&amp;amp;quot;&amp;amp;gt; view class=&amp;amp;quot;tui-tabbar-group&amp;amp;quot;&amp;amp;gt
MUI 顶部选项卡-可左右拖动(div)
顶部选项卡-可左右拖动 .mui-control-content { background-color: white; min-height: 215px; } .mui-control-content .mui-loading { margin-top: 50px; } 顶部选项卡-可左右拖动(div) 待办公文
简单实现底部标签栏切换和顶部选项卡功能
底部标签栏是通过FragmentTabHost实现的 顶部选项卡是通过2015谷歌新推的TabLayout实现的
解决MUI在vue项目中,底部tab不能切换并且会报错的问题
报错如图,通过多方面查看,是谷歌浏览器的一种默认机制https://blog.csdn.net/qq_34129814/article/details/79015150我在引用APP.VUE文件里面使用了上述文章所说的这一行代码,但是在刷新页面的时候依旧报错之后我又在后面mui.css文件中加入 * { touch-action: pan-y; }才正真的解决了这个问题;...
mui 顶部选项卡可左右切换报错的问题
将mui代码里的“viewgroup”换成下图中plus.webview.currentWebview().id即可
vue-cli结合mui 底部选项卡链接跳转不了
MUI底部选项卡链接跳转不了 问题描述: 用MUI例子中的选项卡,底部的导航只能实现div切换,链接无法跳转。 查看控制台,输出:Unable to preventDefault inside passive event listener due to target 的警告。 问题解决: 经检查相关资料,加入以下代码,即可解决问题。 mui(‘body’).on(‘tap’,‘a’,functio...
mui顶部tab页切换
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;         &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-
js 上下移动顶部选项卡固定实现
京东,大v店很多商城都有类似定时抢购选项卡,可以滚动至顶部然后固定; 具体实现如下,贴上代码: &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;滚动至顶部后固定&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&
MUI tab选项卡之间的切换和数据获取
MUI tab
关于mui底部选项卡按钮和文本的两种方式
1.文本  2 .按钮
HBuilder mui入门教程——(2)含tab选项卡的首页
在上一篇文章中简单介绍了mui框架,并创建了第一个mui项目。在APP中,底部的选项卡菜单一般是各个APP都有的,在mui中怎样创建呢,下面就简单说下。极速创建【文件】->【新建】->【HTML文件】,然后在弹出窗口下面的“选择模板组:”中选中“mui底部选项卡(Webview模式)”。点击完成,就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到
mui:选项卡切换+上拉加载+ajax
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据,在网上也没有很好的办法,比较喜欢简单粗暴就直接上代码了。 1.mui:选项卡切换+下拉加载+ajax 1.1关于mui的选项卡切换的样式,mui的官网上有,在这就不多说了 1.2 直接上代码 &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html&amp;a
mui.css实现选项卡功能
基本信息 办理程序 申请材料 其他 基本信息 办理程序 申请材料 其他
仿qq顶部栏tab选项卡切换效果
如图,是实现当前tab页的效果,点击的时候两边切换,实现的效果和qq页面的消息电话顶部栏是一样的.。 首先看一下布局文件R.layout.activity_main     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="#fff
移动端iphoneX的顶部+底部适配层(基于mui框架)
①上个月打包好的app,出现底部不适配原因:app不适配iphoneX。 因为iphoneX去除Home按键指示器底部样式缺失,该app不适配iphonex(ps:在查找了相关资料处理后,又重新打包审核) 解决方法: manifest.json配置文件 ----&amp;gt; ‘代码视图’ ----&amp;gt; 'plus'下添加代码(添加安全区域): &quot;safearea&quot;:{ &quot;backgro...
mui 仿携程 渐变式导航栏 详情table顶部悬停,自动切换table
使用的muidemo渐变式导航栏进行丰富   修改mui.js   Transparent.prototype.handleScroll为以下内容 var y = window.scrollY; var barWrapper = document.querySelector('.brand-bar-wrapper'); var brandBar= document.getElementById...
MUI 选项卡切换+下拉刷新动态 完整实现一例
 前台最终呈现的代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;Hello MUI&amp;lt;/title&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quo
mui滚动选项卡-加强版
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.
mui底部选项卡切换页面的两种模式
两种模式的区别: DIV模式是将所有子页面的内容,分别放置到主页不同的DIV中,当我们点击主页的不同选项卡时,切换不同DIV的显示。 这种方式显然要比加载子页的方式快很多,但是也显然不能承载很多布局的页面,毕竟要在一个主页中写入所有子页面的代码,显得不太现实。 而WebView模式则是将所有子页面都写入到不同的子页面中,再通过主页连接到一起,点击不同的选项卡 ,加载不...
移动端通用顶部选项卡
先上效果图:  &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;移动端通用顶部选项卡&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta content=&quot;width=device-width, initial-scale=1.0, maximum
mui选项卡
极速创建 【文件】-&amp;gt;【新建】-&amp;gt;【HTML文件】,然后在弹出窗口下面的“选择模板组:”中选中“mui底部选项卡(Webview模式)”。点击完成,就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到已经创建了一个有底部选项卡的主页面。再浏览其它页面可以看到各个页面的内容。但是在右侧的web浏览器中点击选项卡的话,只是顶部标题文字变了,内...
muitab切换滑动,加主体页面滑动效果
mui.init() body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;} div.mui-content{background-color: #F1E9DC;} p{margin-bottom: 0px;} .mui-slider-indicator.mui-se
mui-侧面选项卡+上拉刷新
效果图: 代码: &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, user-scalable=no, minimal-ui&quot;/&amp;gt; &amp;lt;
mui 头部tab代码2
mui 头部选项卡
MUI,webview选项卡
var subpage=['shouye.html','tel.html','email.html','shezhi.html']; //创建页面 var sub_style={ top:'0px', bottom:'51px' } var show={}; mui.plusReady(function(){ var ha
mui上拉加载+选项卡+ajax
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据,在网上也没有很好的办法,自己研究弄了一个小demo。
mui 选项卡禁止滑动
每次做选项卡滑动内容的时候总会不经意滑到另一个内容中,贼恶心,所以要禁止选项卡滑动只需要一行代码就可以实现:mui('.mui-slider').slider().stopped = true;...
MUI 制作顶部滑动条的坑们
制作顶部滑动条的坑们 1、需要借助于 MUI 中的 tab-top-webview-main.html 2、需要把 slider 区域的 mui-fullscreen 类去掉 3、滑动条无法正常触发滑动,通过检查官方文档,发现这是JS组件,需要被初始化一下 + 导入 mui.js + 调用官方提供的 方式 去初始化     mui('.mui-scroll-wrapper').scroll({  ...
顶部导航栏之一(选项卡TabBar动态显示几个 滑动,点击)
&amp;lt;view class=&quot;navbar&quot;&amp;gt; &amp;lt;text wx:for=&quot;{{navbar}}&quot; data-idx=&quot;{{index}}&quot; class=&quot;item {{currentTab==index ? 'active' : ''}}&quot; wx:key=&quot;unique&quot; bindtap=&quot;navbarTap&quot;&amp;gt;{{ite
mui -- 选项卡切换+上拉加载
推荐 热点 北京 第1个选项卡子项-1 第1个选项卡子项-2 第1个选项卡子项-3 第1个选项卡子项-4 第1个选项卡子项-5 第2个选项卡子项-1 第2个选项卡子项-2 第2个选项卡子项-3 第2个选项卡子项-4 第2
mui框架修改底部选项卡颜色
mui框架修改底部选项卡颜色 .mui-bar-tab .mui-tab-item.mui-active { color: #60a4ea; /* 这里放你想要的颜色 */ } .mui-bar .mui-icon:active { opacity: 1; }
mui实现tab
左捣腾右鼓捣的完成了第一个tab1、修改manifest.json现在还不知道为啥在这个文件配置tab,主要修改了tab的图标、文字、位置2、修改index.htmlindex.html绘制了原tab中的大图标以及其自定义的监听事件,这些全部删除。还需要修改监听时间的currIndex。3、配置util.jsutil.js主要配置的了tab的重绘以及高亮。重新设置了tab的重绘次数。...
头部菜单栏(选项卡)demo
又来写demo了,一个点击头部菜单栏的选项卡demo,对于初学者来说还是可以参考的。 在目前的web(或者webapp)开发中,很少会用这种来写多页面选项卡的,毕竟如果页面内容复杂的话,会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。 好了,只是参考参考用,下面贴代码   &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;h...
mui 滑动选项卡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <t
mui顶部菜单栏弹出框遮挡问题
问题描述: 要求实现的就是在主页面index下subpages4个子页面作为navtab,而点击顶部的菜单栏右上角会有弹出窗口,问题是弹出窗口在subpages下会被遮盖 解决方案: 1. 看到最多的解决方案是将弹出菜单写在子页面中,在header的html里捕获到点击按钮事件后,通过evaljs给子页面,弹出菜单,不过这种方法弄了好
mui滚动tab切换问题
根据ui设计图 中间有需要做左右滑动tab切换的问题,选择用mui里的滑动tab切换组件来做这部分的效果,但是相应地也产生了一系列的问题。 滚动内容部分需要用mui-scroll-wrapper&amp;gt;mui-scroll这样的结构包裹起来,如果直接在.mui-slider-item里面放内容,在上下滑动的时候会容易飘而滚向下一个tab内容,但是加了mui-scroll-wrapper&amp;gt;...
MUI选项卡下拉刷新上拉加载demo
这是一个基于mui框架下实现的一个上拉刷新,下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感,减少副武器的压力
mui底部tab代码
mui底部Tab选项卡
mui开发APP教程之使用选项卡跳转子页面
首页HTML代码: &amp;lt;!--主页面底部选项卡--&amp;gt; &amp;lt;nav class=&quot;mui-bar mui-bar-tab&quot;&amp;gt; &amp;lt;a id=&quot;defaultTab&quot; class=&quot;mui-tab-item mui-active&quot; href=&quot;html/index-sub-home.html&quot;&amp;gt; &amp;lt;span cl
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java大神班 大数据大神班