小程序自定义底部导航 custom-tab-bar

这篇具有很好参考价值的文章主要介绍了小程序自定义底部导航 custom-tab-bar。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航;或者导航样式需要个性化设计。此时就需要用到自定义底部导航 custom-tab-bar。

具体操作:

1、根目录下创建custom-tab-bar目录

小程序自定义底部导航 custom-tab-bar

2、在app.json文件中配置导航信息

"tabBar": {
  "custom": true, // 开启自定义导航
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [ // 配置导航按钮信息 如果按条件显示不同按钮的话;这里一定要把所有的按钮全量的都配置上(比如当前示例中,登录前显示首页和我的两个按钮;登录后显示首页、工作台、我的三个按钮;在这里要把可能出现的按钮全部配置上)
    {
      "pagePath": "pages/home/index",  //页面路由
      "iconPath": "/img/icon_home_def.png", // 按钮图标
      "selectedIconPath": "/img/icon_navbar_homesel.png", // 选中时图标
      "text": "首页" // 按钮文字
    },
    {
      "pagePath": "pages/workbench/index",
      "iconPath": "/img/icon_navbar_workdef.png",
      "selectedIconPath": "/img/icon_navbar_worksel.png",
      "text": "工作台"
    },
    {
      "pagePath": "pages/my/index",
      "iconPath": "/img/icon_navbar_userdef.png",
      "selectedIconPath": "/img/icon_navbar_usersel.png",
      "text": "我的"
    }
  ]
},

3、custom-tab-bar/index.wxml 文件内容

<!--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>

4、custom-tab-bar/index.js 文件内容

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#ff0000",
    list: []
  },
  attached() {
    this.setData({
      list: [
        {
          "pagePath": "/pages/home/index",
          "iconPath": "/img/icon_home_def.png",
          "selectedIconPath": "/img/icon_navbar_homesel.png",
          "text": "首页"
        },
        {
          "pagePath": "/pages/my/index",
          "iconPath": "/img/icon_navbar_userdef.png",
          "selectedIconPath": "/img/icon_navbar_usersel.png",
          "text": "我的"
        }
      ]
    })
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

5、custom-tab-bar/index. wxss文件内容

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  padding-top: 4px;
  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;
}

6、导航跳转到的页面内

// 这样按钮才能正确显示选中效果
onShow(){
  if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0
    })
  }
},

7.效果:

登录前:
小程序自定义底部导航 custom-tab-bar

登录后:文章来源地址https://www.toymoban.com/news/detail-512488.html

小程序自定义底部导航 custom-tab-bar

到了这里,关于小程序自定义底部导航 custom-tab-bar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp中使用微信小程序custom-tab-bar

    今天把小程序项目中的 tabBar 改为使用自定义的tabbar 其实很简单,只要按照小程序开发文档中的步骤来做 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。 示例: 在代码根目

    2023年04月08日
    浏览(33)
  • [快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar

    [快速上手RN] 0.React Native 快速启动项目 [快速上手RN] 1. React native 项目集成UI Kitten [快速上手RN] 2. React native 项目色彩主题色编辑及使用 [快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar [快速上手RN] 4. React native 集成redux 首先我们确认目标 在APP底部新增一个导航栏 导航栏点

    2024年02月05日
    浏览(50)
  • 小程序Taro框架 自定义底部Tabbar,处理自定义Tab栏切换卡顿、闪烁

    最近在用Taro框架开发一个小程序,有一个自定义底部Tabbar的需求,最终效果如下  这页是我第一次接触自定义小程序底部Tabbar,所有第一选择必然是相看官方文档:微信小程序自定义 Tabbar | Taro 文档 ( 如果第一次做,请一定要仔细看这个文档 ) 按照文档正常配置app.confi

    2024年03月21日
    浏览(40)
  • 微信小程序自定义底部导航栏

    微信小程序自定义底部导航栏,原生实现,不包含其他任何第三方组件,比较干净,开箱即用 效果预览: 可自定义底部导航栏列表样式 可自定义每个菜单的默认、激活后的图标和文字样式 可自定义是否添加中间的大图标菜单,当然也可自定义大图标的默认与激活样式 可自

    2024年02月07日
    浏览(51)
  • TDesign电商小程序模板解析01-自定义底部导航栏

    我们已经利用了两篇文章解读了一下微信小程序带的TDesign模板 TDesign小程序组件库01 TDesign小程序组件库02 入门一款前端组件库,如果挨个去看每个组件的用法未免比较枯燥,即使看懂了其实离实际开发还是比较远的。为了快速的入门,其实带着一个实际的案例去学习就比较快

    2024年02月10日
    浏览(55)
  • 微信小程序基于vant的自定义底部导航栏

    基于vant-weapp的底部导航栏,首先根据vant官网安装vant https://vant-ui.github.io/vant-weapp/#/quickstart 由于vant的Tabbar 标签栏自带翻页效果,而且不够美观,且小程序最多只支持10个页面栈,点击多了会导致报错 报错如下  将wx.navigateTo改为wx.redirectTo在反复多点很多次之后依然会报错,所

    2024年02月13日
    浏览(43)
  • 微信小程序、uniapp自定义底部导航栏(附源码)

    需求分析 目前开发一套“同城跑腿平台”小程序,面向用户和骑手,需要两个不同的底部导航,uniapp原生导航不满足要求。所以需要自定义导航栏。 随着自定义导航卡完成,切换选项卡页面总是闪烁,在网上也没有搜到完整的解决方法,总不能完美解决。现在我有一个方法

    2024年02月04日
    浏览(57)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(52)
  • uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现

            先看效果是否可以满足你们,如果可以满足你只要一步一步照着做绝对没有错。         本人技术不佳,研究了一整天,全网的大佬们写的博客看的晕头转向,避免大伙再走弯路,跟着我以下步骤一点一点来绝对可以实现。         最终效果图: (如果你

    2024年02月04日
    浏览(49)
  • 华为鸿蒙应用--底部导航栏Tabs(自适应手机和平板)-ArkTs

    鸿蒙ArkTS Tabs组件开发底部导航栏,可自适应平板和手机,相当于Android开发中的MainActivity+Fragment的底部导航栏模式。 一、主页:MainPage.ets StyleConstants.ets: 二、BreakpointSystem.ets:响应式设计的核心 三、ButtonInfoModel.ets:底部导航按钮数据 

    2024年01月21日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包