微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量

这篇具有很好参考价值的文章主要介绍了微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求分析

        小程序登录进来有2种身份,每种身份看到的页面不一样,而且tabbar的数量也不一样,这个时候就需要用到微信小程序的自定义tabbar, 自定义tabbar和原生tabbar在用户体验上差不多,几乎看不出有什么区别,废话不多说直接上代码

创建一个文件夹 custom-tab-bar,uniApp和微信小程序一样 放在项目根目录 (文件名不可更改)(如图所示)

如果是uniapp项目,代码也是wxml,wxss的语法, custom-tab-bar并不会被uniapp编译

微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量,微信小程序,uni-app,小程序

在custom-tab-bar文件夹创建index.wxml  (小程序官方建议:使用cover-view把层级尽量提高)

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

在custom-tab-bar文件夹创建index.js

        通过改变list来更新tabbar的样式,以及数量

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index1",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件1"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "组件2"
    },
    {
      pagePath: "/index/index3",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "组件3"
    }
  ]
  },
  show() {
      // 可以在这里控制显示
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

在custom-tab-bar文件夹创建index.wxss 

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

在custom-tab-bar文件夹创建index.json

{
  "component": true
}

 

配置app.json

        重要提示:“app.json中tabbar的list属性往多的配置,我理解为初始化站位,例如 true的时候显示2个tab,false的时候显示3个tab,那么tabbar的list里面就要配置三个tab,然后在custom-tab-bar/index.js里面可以控制tab的显示数量”

{
  "pages":[
    "index/index",
    "index/index2",
    "index/index3"
  ],
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "index/index1",
        "text": "组件1"
      },
      {
        "pagePath": "index/index2",
        "text": "组件2"
      },
      {
        "pagePath": "index/index3",
        "text": "组件3"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

页面配置

        我这里有index1,index2,index3,三个页面,分别在页面的onShow事件里面新增如下代码,

         selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index

        例如:上面的 index1页面是0, index2页面是1,index3页面是2

onShow(){
   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        //selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index
        this.getTabBar().setData({
          selected: 2
        })
   }
}

欢迎大家留言讨论,如有问题私信我文章来源地址https://www.toymoban.com/news/detail-544136.html

到了这里,关于微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

    1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot=\\\'inactive-icon\\\'(选中的图标)和slot=\\\'inactive-icon\\\'(未选中的图标)自定义图片样式 u-tabbar组件默认已经为i

    2024年02月13日
    浏览(74)
  • 优雅的实现微信小程序动态tabBar及组件中实现动态数据

    这段时间在开发一个微信小程序,有个需求是,小程序底部的tabBar导航实现动态化。就是根据用户角色不同,显示不同的导航。要实现动态导航首先要考虑的是如何把小程序中的原生导航更改为自定义导航。 一、根据官方文档所说,实现自定义导航首先要在app.js中配置好ta

    2024年02月12日
    浏览(46)
  • uni-app 微信小程序tabBar角标或徽标badge不生效 但Android安卓却显示正常

    今天复习项目时又遇到了一个奇怪的问题: 使用uni-app写tabBar的中购物车右上角的角标时,从商品详情页点击添加到购物车后,商品详情右上角的角标数字会跟随Vuex仓库中的商品总数发生变化,但是主页面也就是tabBar页面中的购物车角标不会变化,或者只有第一次添加会变化,

    2024年04月14日
    浏览(113)
  • GPT问答记录:微信小程序动态tabBar开发配置(服务端+前端代码)

    答1: 好的,下面是一个具体的方案供你参考,包括数据库表设计、Java 后台代码和小程序前端代码。请注意,这个方案仅供参考,具体实现可能需要根据你的实际需求进行调整。 数据库表设计 首先,需要设计一个 tabBar 数据表来存储 tabBar 配置信息,该表包含以下字段: i

    2023年04月22日
    浏览(53)
  • 优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航

    背景 在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。此时就需要用到自定义底部导航 custom-tab-bar。 上次发文是组合显示4个底部tabBar导航,很多小伙伴评论说组合超过5个怎么办。他们的需求总数超过5个了。 现在我在这里更新

    2024年02月14日
    浏览(38)
  • 在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

    backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理,模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色(RGB值为0, 0, 0),并且通过/符号后面的透明度值(32%不透明度)使背

    2024年04月09日
    浏览(50)
  • uniapp通过custom-tab-bar 自定义tabbar导航栏(主要用于微信小程序)

    这个自定义的tabbar是用于微信小程序方面的 开始: uniapp文档搜索自定义tabbar,并找到这个 第一步: 根目录创建 custom-tab-bar 文件,并在page.json文件里面tabbar设置项中添加 custom 属性,并设置为 true,list数组不要清空,把你得tabbar页面也写上去,他需要和你得自定义得tabbar那个数组对照

    2024年04月09日
    浏览(59)
  • 优雅实现微信小程序动态tabBar,根据不同用户角色显示不同底部导航——更新版(支持自由组合总数超过5个tabBar菜单)

    背景 在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。此时就需要用到自定义底部导航 custom-tab-bar。 上次发文是组合显示4个底部tabBar导航,很多小伙伴评论说组合超过5个怎么办。他们的需求总数超过5个了。 现在我在这里更新

    2024年02月03日
    浏览(47)
  • 基于自定义组件实现微信小程序动态tabBar,根据不同用户角色显示不同底部tabBar,支持自由组合总数超过5个(更新版)

    背景 在开发小程序过程中,有个需求是,小程序底部的tabBar需要根据不同用户角色显示不同底部导航。此时就需要用到自定义底部导航 custom-tab-bar。 上次发文是组合显示4个底部tabBar导航,很多小伙伴评论说组合超过5个怎么办。他们的需求总数超过5个了。 现在我在这里更新

    2024年01月17日
    浏览(38)
  • uniapp 微信小程序 动态分享 带参数

    uniapp 微信小程序 有动态参数的那种 微信小程序分享有两种分享。 第一种:就是右上角自带的菜单分享 第二种: button按钮通过open-type=\\\"share\\\" 点击分享 通常我们分享默认都是分享本页面 然后带一些分享参数比如说id uid等 直接放在url地址后面就可以了, 那如果我们使用 按钮

    2024年02月11日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包