chencent
chencent
  • 发布:2015-01-24 17:36
  • 更新:2015-03-07 23:33
  • 阅读:1470

tabbar 大家如何做的

分类:HTML5+

大家怎么实现的呢,是通过div还是webview,选择后,上面的页面如何实现呢,是通过上面方式显示呢?

2015-01-24 17:36 负责人:无 分享
已邀请:
小微

小微

你是遇到什么问题了吗。把需求说出来,这样大家知道怎么回答你。官方有多种案例
http://dcloudio.github.io/mui/components/#tableviews

  • chencent (作者)

    顶部和底部是统一个页面呢,还是底部属于index.html,顶部分别在其他对应页面呢,比如:home.html,a.html里面呢,所谓顶部就是header.

    2015-01-24 18:14

chencent

chencent (作者)

<header class="mui-bar mui-bar-nav" style="background: #FF8932; height: 64px;">  
            <div style="height: 20px;width:100%;"></div>  
            <!--a class="mui-icon mui-icon-bars mui-pull-left" style="color: #ffffff;"></a-->  
            <h1 id="title" class="mui-title" style="color: #fff; font-size: 20px;">首页</h1>  
    </header>

顶部和底部是统一个页面呢,还是底部属于index.html,顶部分别在其他对应页面呢,比如:home.html,a.html里面呢,所谓顶部就是header.

小微

小微

我的建议是,如果页面的内容不多,只是要切换来切换去的。用div模式。
如果有滚动的,则一般用webview模式,这样不会卡。。
同样的,列表也是一样。有滚动的一般用webview模式,因为是调用原生的。

  • chencent (作者)

    那么上面的页面,是如何做的呢。看下面的回复

    2015-01-24 18:26

chencent

chencent (作者)

<header class="mui-bar mui-bar-nav" style="background: #FF8932; height: 64px;">  
            <div style="height: 20px;width:100%;"></div>  
            <!--a class="mui-icon mui-icon-bars mui-pull-left" style="color: #ffffff;"></a-->  
            <h1 id="title" class="mui-title" style="color: #fff; font-size: 20px;">首页</h1>  
    </header>

这段代码,是每个页面加一下,还是加在首页,然后两者之间的区域通过不同页面调换呢?

<script type="text/javascript" charset="utf-8">  
        var subpages = ['home.html','guangchang.html','pengyou.html','user.html'];  
            var subpage_style = {  
                top: '0px',  
                bottom: '50px'  
            };  
.....

也就是header放在首页,还是放在home.html里面呢

小微

小微

这个是放在首页的,通过代码切换,这种是webview模式的

  • chencent (作者)

    看下面的。

    2015-01-24 18:40

chencent

chencent (作者)

问题是,我如果想实现,每个页面顶部header显示的内容不一样呢?是通过显示和隐藏显示对于的吗?
比如 home页面 我想显示搜索,其他页面不显示,显示设置等,怎么处理呢?js控制显示隐藏吗?

  • DCloud_UNI_CHB

    js控制显示隐藏即可,参考hello mui中webview模式的选项卡,顶部标题就是通过js动态切换的。

    2015-01-25 09:43

小微

小微

header的内容可以用js来切换。比如
window.addEventListener("updateHeader", function(e) {
var title = '下拉刷新和上拉加载更多';
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
});

waxdz2015

waxdz2015

如果把tabbar放在一个单独的页面里面,首页初始化的地方该怎么写?

mui.init({  
                subpages:[{  
                  url:'tabbar.html',//tabbar页面  
                  id:'tabbar',  
                  styles:{  
                    top:'50px'  
                }  
                }]  
              });

这样吗,调试的时候发现tabbar.html不知道哪里去了,可能样式导致的位置错误

该问题目前已经被锁定, 无法添加新回复