小程序动态TabBar

作者: 蓝枫 | 来源:发表于2018-04-05 22:51 被阅读409次
  • 背景:从小程序诞生到现在做了几个小程序,但是关于tabbar一直是按照官方的方式走的。而且也认为作为一个即用即走的产品不应该复杂到要用到动态tabbar。但是经不住客户的压迫还是要办法。
  • 客户需求是:两种用户类型,登录之后按照权限划分两套界面。
  • 解决办法:抛弃官方的tabbar自己写两个tabbar分别放到需要不同tabbar的页面里,也可以封装成一个template供所有页面调用。使用方法例如:登录页发起网络请求之后,拿到用户权限,根据权限跳转到不同的页面,页面和tabbar一一对应就好了。

---------------下面的代码是一个简单的模版可以使用,请自己美化------------------

<view style="width:100%;height:100rpx; display:flex; flex-direction: row;justfy-content: center; border: 1rpx solid #eee; position: fixed; bottom:0; left:0;">
<view style="width: 49%;height:99rpx; text-align:center; line-height: 99rpx; border-right:1rpx solid #FFF;box-shadow: 1px 7px 6px #eee;color:#85C350" bindtap='handleQuestion'>问题</view>
<view style="width: 49%;height:99rpx; text-align:center; line-height: 99rpx;box-shadow: 1px 7px 6px #eee;" bindtap='handleComment'>评论</view>
</view>

相关文章

  • 小程序动态TabBar

    背景:从小程序诞生到现在做了几个小程序,但是关于tabbar一直是按照官方的方式走的。而且也认为作为一个即用即走的...

  • 学习微信小程序

    tabBar: 小程序下面的选项卡 屏幕下方 和QQ中联系人 消息 动态 基本上一样 要想使用tabBar 必须...

  • 关于微信小程序动态改变底部导航栏问题

    微信小程序目前是不支持动态修改tabbar的,如果想在不同的页面显示不同的底部导航,那只有自定义tabbar了, ...

  • 微信小程序 自定义底部导航

    先看效果 很多时候微信小程序自带的tabBar已不满足需求,转而使用微信小程序的自定义tarbar,进行动态展示,...

  • 微信小程序动态tabBar实现

    最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了,这...

  • 小程序底部tabBar样式

    小程序底部tabBar代码,添加于app.json "tabBar": {"color": "#222","sel...

  • 微信小程序

    微信小程序 - 监听 TabBar 切换点击事件 在小程序开发的时候想要监听系统的 TabBar 切换点击事件,只...

  • 不要逼死程序猿-小程序UI规范

    (1) tabBar navigationBar 度为小程序固定 tabBar icon 大小限制为40kb,建...

  • 小程序tabbar

    1.tabbar右上角购物车数量展示 wx.setTabBarBadge({ index:1,//tabbar的下...

  • 小程序 tabbar

    tabbar 实现方案 使用系统默认的 tabbar 使用系统自定义的方式 使用 weui 组件库 自定义 tab...

网友评论

  • 小丑_3bd1:老哥,能看下demo嘛
    蓝枫:@小丑_3bd1 最新进展,自己定义一个组件吧。
  • noahlam:官方的tabbar.动态切换需要1.9的基础库,目前大概还有7%的用户不是1.9,会在控制台报错,而且会中断js代码执行,造成程序“崩溃”
  • noahlam:自己写的,从有tabbar页面切换到没有tabbar页面,会出现tabbar飞出去的效果,太难看了
    蓝枫:当功能性要求放在首位时考虑不了那么多了就:joy:

本文标题:小程序动态TabBar

本文链接:https://www.haomeiwen.com/subject/kotjhftx.html