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>


图片说明

1

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');      ...
简单实现底部标签栏切换和顶部选项卡功能
底部标签栏是通过FragmentTabHost实现的 顶部选项卡是通过2015谷歌新推的TabLayout实现的
微信小程序----导航栏选项卡(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,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 顶部选项卡-可左右拖动(div)
顶部选项卡-可左右拖动 .mui-control-content { background-color: white; min-height: 215px; } .mui-control-content .mui-loading { margin-top: 50px; } 顶部选项卡-可左右拖动(div) 待办公文
仿qq顶部栏tab选项卡切换效果
如图,是实现当前tab页的效果,点击的时候两边切换,实现的效果和qq页面的消息电话顶部栏是一样的.。 首先看一下布局文件R.layout.activity_main     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="#fff
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选项卡切换功能
测试subpage html, body { background-color: #efeff4; } 库存 库存 个人中心 设置 //mui初始化 mui.init({ swipeBack: false }); var menu = null, m
选项卡(移动端 可手滑动)
HTML js swiper 实现选项卡,可以在移动端用手指滑动。
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底部导航条选项卡切换页面,切换子页面模式
先看效果图:   实现原理:通过切换中间部分子页面进行实现 实现步骤: 第一步:创建所需的子页面,这里仅展示其中一个子页面代码,其他子页面照瓢画葫即可。 &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;
MUI Tab选项卡内容高度不自适应
今天在开发过程中遇到MUI Tab选项卡内容高度始终为0的情况,官方Demo是设置了固定高度的,去掉就无法撑开,以前遇到过一次是自己通过逐层改样式实现默认100%高度,今天研究了一会实在懒得调样式,于是百度了一番,发现相关资料很少,好在在dcloud社区看到一个回复,尝试了一下发现的确有用,现在整理一下供大家参考。 解决方案 1、在最外层class为mui-content的元素上添加class:m...
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在vue项目中,底部tab不能切换并且会报错的问题
报错如图, 通过多方面查看,是谷歌浏览器的一种默认机制 https://blog.csdn.net/qq_34129814/article/details/79015150 我在引用APP.VUE文件里面使用了上述文章所说的这一行代码,但是在刷新页面的时候依旧报错 之后我又在后面mui.css文件中加入 * { touch-action: pan-y; } 才正真的...
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选项卡下拉刷新上拉加载demo
这是一个基于mui框架下实现的一个上拉刷新,下拉加载的一个数据加载demo这样的做法是为了提高用户的体验感,减少服务器的压力~
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 选项卡禁止滑动
每次做选项卡滑动内容的时候总会不经意滑到另一个内容中,贼恶心,所以要禁止选项卡滑动只需要一行代码就可以实现:mui('.mui-slider').slider().stopped = true;...
HBuilder mui入门教程——(2)含tab选项卡的首页
在上一篇文章中简单介绍了mui框架,并创建了第一个mui项目。在APP中,底部的选项卡菜单一般是各个APP都有的,在mui中怎样创建呢,下面就简单说下。极速创建【文件】->【新建】->【HTML文件】,然后在弹出窗口下面的“选择模板组:”中选中“mui底部选项卡(Webview模式)”。点击完成,就会自动创建一个带有默认页面的模板。 打开tab-webview-main.html可以在右侧看到
mui.css实现选项卡功能
基本信息 办理程序 申请材料 其他 基本信息 办理程序 申请材料 其他
mui 头部tab代码2
mui 头部选项卡
mui框架修改底部选项卡颜色
mui框架修改底部选项卡颜色 .mui-bar-tab .mui-tab-item.mui-active { color: #60a4ea; /* 这里放你想要的颜色 */ } .mui-bar .mui-icon:active { opacity: 1; }
MUI 制作顶部滑动条的坑们
制作顶部滑动条的坑们 1、需要借助于 MUI 中的 tab-top-webview-main.html 2、需要把 slider 区域的 mui-fullscreen 类去掉 3、滑动条无法正常触发滑动,通过检查官方文档,发现这是JS组件,需要被初始化一下 + 导入 mui.js + 调用官方提供的 方式 去初始化     mui('.mui-scroll-wrapper').scroll({  ...
头部菜单栏(选项卡)demo
又来写demo了,一个点击头部菜单栏的选项卡demo,对于初学者来说还是可以参考的。 在目前的web(或者webapp)开发中,很少会用这种来写多页面选项卡的,毕竟如果页面内容复杂的话,会出现加载慢卡顿等问题。但是对于单页面逻辑没那么复杂的话还是可以的。 好了,只是参考参考用,下面贴代码   &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;h...
仿微信顶部选项卡
仿微信5.0顶部滑动选项卡
mui上拉加载+选项卡+ajax
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据,在网上也没有很好的办法,自己研究弄了一个小demo。
mui 顶部选项卡可左右切换报错的问题
将mui代码里的“viewgroup”换成下图中plus.webview.currentWebview().id即可
顶部导航栏之一(选项卡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底部选项卡点击切换HTML页面并且文字和图片高亮显示
自己第一次采用mui开发APP,APP页面底部都会有导航栏,用以点击跳转页面,那么这个功能如何实现呢,采用了多种方法均不可行,多次尝试之后,发现如下方法可以,但注意的是:plus事件在pc端没有效果,必须真机测试才有效果。将mui自带的icon图片换成自己的,实现点击高亮显示的方法如下: 1.给.navbot .home {}设置自己需要的背景图片 2点击之后的高亮只需要在css里...
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
mui底部选项卡切换页面的两种模式
两种模式的区别: &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;DIV模式是将所有子页面的内容,分别放置到主页不同的DIV中,当我们点击主页的不同选项卡时,切换不同DIV的显示。 这种方式显然要比加载子页的方式快很多,但是也显然不能承载很多布局的页面,毕竟要在一个主页中写入所有子页面的代码,显得不太现...
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上拉加载
HTML: &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-
webpack开发环境中使用MUI框架的tab-top-webview-main遇见的问题总结
制作页面顶部导航时问题总结 将mui中的顶部导航引入页面中,会发现mui-fullscreen是显示全屏类与顶部公共组件重叠显示,需要将此类名删除。 引入后刷新界面,无法左右拖动导航,需要将mui的scroll滚动控件初始化,mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离...
对于mui框架底部选项卡a标签不起作用的解决办法
今天在做手机Wap端时,在做底部选项卡时,用到了mui框架,给&amp;amp;amp;lt;nav&amp;amp;amp;gt;&amp;amp;amp;lt;/nav&amp;amp;amp;gt;里面的a标签加链接时,发现a标签点击始终不跳转,在网上搜索,发现mui框架下的底部选项卡a标签有Bug,最后查到解决办法,如有错误,欢迎指正! 解决办法: ...
简单实现mui-底部选项卡
关于底部选项卡的问题我查看了很多种方法,试了无数次,终于找到适合自己的一种方法。 我在看官方的mui文档的时候发现并没有找到选项卡的位置,所以我并没有采纳可能是我太笨了吧接触的还少,先说说我原先是如何写底部选项卡的 &amp;lt;nav class=&quot;mui-bar mui-bar-tab&quot;&amp;gt; &amp;lt;a class=&quot;mui-tab-item mui-active&quot; href=&quot;...
mui webviewGroup.js
mui 顶部选项卡-实现可左右拖动(webview) 必须的js文件