小程序自定义底部导航 custom-tab-bar完整实现代码附效果图

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

根据用户身份,动态设置底部的导航图标

微信小程序底部导航栏代码,Web前端,微信小程序,custom-tab-bar,自定义底部导航,小程序自定义底部导航,根据用户身份定义tabbar微信小程序底部导航栏代码,Web前端,微信小程序,custom-tab-bar,自定义底部导航,小程序自定义底部导航,根据用户身份定义tabbar

 实现步骤:

第一步,先配置:app.json里面的 tabBar 的 custom 设置为 true,如图:这里需要注意的是,自定义 tabBar 中包含的页面,在这里的 list 页面路径也必须得有,其它字段可以不设置

微信小程序底部导航栏代码,Web前端,微信小程序,custom-tab-bar,自定义底部导航,小程序自定义底部导航,根据用户身份定义tabbar
相关代码:

 

{
  "pages": [
    "pages/msgList/msgList",
    "pages/index/index",
    "pages/login/login",
    "pages/user/user"
  ],
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": ""
      },
      {
        "pagePath": "pages/msgList/msgList",
        "text": ""
      },
      {
        "pagePath": "pages/user/user",
        "text": ""
      }
    ]
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "darkmode": true,
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {
    "weui": true
  }
}

第二步,创建组件:在项目跟目录创建文件夹:custom-tab-bar ,里面是自定义底部导航的组件文件:

微信小程序底部导航栏代码,Web前端,微信小程序,custom-tab-bar,自定义底部导航,小程序自定义底部导航,根据用户身份定义tabbar

 组件完整示例代码如下:

index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: []
  },
  attached() {

    getApp().getUserInfo().then(res => {
      let userIdentity = res.userIdentity;
      console.log('userIdentity', userIdentity)
      userIdentity =2
      let arr1 = [{
        pagePath: "/pages/index/index",
        iconPath: "/images/icons/home.png",
        selectedIconPath: "/images/icons/home2.png",
        text: "首页"
      }, {
        pagePath: "/pages/msgList/msgList",
        iconPath: "/images/icons/message.png",
        selectedIconPath: "/images/icons/message2.png",
        text: "消息"
      }, {
        pagePath: "/pages/user/user",
        iconPath: "/images/icons/mine.png",
        selectedIconPath: "/images/icons/mine2.png",
        text: "我的"
      }]
      let arr2 = [{
        pagePath: "/pages/index/index",
        iconPath: "/images/icons/home.png",
        selectedIconPath: "/images/icons/home2.png",
        text: "首页"
      }, {
        pagePath: "/pages/user/user",
        iconPath: "/images/icons/mine.png",
        selectedIconPath: "/images/icons/mine2.png",
        text: "我的"
      }]
      this.setData({
        list: userIdentity == 1 ? arr1 : arr2
      })
    })
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

index.json

{
  "component": true
}

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>

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;
}

第3步,使用组件,在第一个tab页面的onShow写0,根据 tabBar 的 List 的下标累加。


  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      console.log('2222222')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

以上就完成了根据用户身份动态设置底部的导航图标的效果,如果还有疑问可以在评论区留言,对你有帮助的话点个赞吧~文章来源地址https://www.toymoban.com/news/detail-557976.html

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

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

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

相关文章

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

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

    2023年04月08日
    浏览(35)
  • [快速上手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日
    浏览(52)
  • 小程序Taro框架 自定义底部Tabbar,处理自定义Tab栏切换卡顿、闪烁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年01月21日
    浏览(69)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包