微信小程序自定义底部导航栏组件

作者:weixin_43865030 时间:2024-07-28 21:06:08 

本文实例为大家分享了微信小程序底部导航栏组件的具体实现代码,供大家参考,具体内容如下

1、在自己项目的公共组件的文件价下新建tabbar.vue(定义的自定义导航栏组件)


<template>
 <view v-if="showTabbar" class="tabbar">
   <view
     v-for="(item, index) in tabList"
     :key="index"
     class="icon"
     @click="switchTabBar(item.path, index)"
   >
     <image :src="index == current ? item.iconActivePath : item.iconPath"></image>
     <text :class="index == current ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text>
   </view>
 </view>
</template>

<script>
 // import container from '@/channelMessage/get-container'

export default {
   props: {
     showTabbar: {
       type: Boolean,
       default: true,
     },
     current:{ // 当前页面index
   type:Number,
   default:0
  },
   },
   data() {
     return {
       selectedIndex: 0,
       tabList: [
         {
           name: "首页",
           iconPath: require("../../../static/image/img/tab-home-nor.png"),
           iconActivePath: require("../../../static/image/img/tab-home-sel.png"),
         path: "/pages/index/index",
         },
         {
           name: "购物车",
           iconPath: require("../../../static/image/img/tab-cart-nor.png"),
           iconActivePath: require("../../../static/image/img/tab-cart-sel.png"),
           path: "/pages/cart/cartEdit",
         },
         {
           name: "我的",
           iconPath: require("../../../static/image/img/tab-my-nor.png"),
           iconActivePath: require("../../../static/image/img/tab-my-sel.png"),
           path: "/pages/mine/mine",
         },
       ],
   }
   },

onShow() {
     // const containerId = container.getContainerId()
     // if (containerId == '1000') {
     //   this.showTabbar = false
     // }
   },
   methods: {
   switchTabBar(path, index) {
     this.item_index = index
     wx.switchTab({
         url: path,
     })
       // this.$router.replace(path)
     },

},
}
</script>

<style lang="scss" scoped>
 .tabbar {
   position: fixed;
   bottom: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-around;
   width: 100%;
   height: 100rpx;
   background-color: #ffffff;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);

.icon {
     display: flex;
     flex-direction: column;
     align-items: center;

image {
       width: 50rpx;
       height: 50rpx;
     }
 }
 .active_text{
       font-size: 20rpx;
       margin-top: 5rpx;
   color: #d81e06;
     }
 .text{
   font-size: 20rpx;
   margin-top: 5rpx;
   }
 }
</style>

2、在项目中的pages.json文件中新增代码,保证tabbar.vue中的wx.switchTab可以正常使用,代码如下:


"tabBar": {
   "selectedColor": "#EE2F51",
   "list": [{
     "pagePath": "pages/index/index",
     "text": "首页",
     "iconPath": "static/image/img/tab-home-nor.png",
     "selectedIconPath": "static/image/img/tab-home-sel.png"
   },{
     "pagePath": "pages/cart/cartEdit",
     "text": "购物车",
     "iconPath": "static/image/img/tab-cart-nor.png",
     "selectedIconPath": "static/image/img/tab-cart-sel.png"
   },{
     "pagePath": "pages/mine/mine",
     "text": "我的",
     "iconPath": "static/image/img/tab-my-nor.png",
     "selectedIconPath": "static/image/img/tab-my-sel.png"
   }]
 },

3、在main.js中全局注册自定义组件


import tabBar from "./customComponents/commonComponents/tabBar/index.vue";

//换自己的组件位置,这里的index.vue就是前面所说的tabbar.vue
Vue.component("tabBar", tabBar);

4、在需要使用导航栏的页面引入注册的组件


//为页面引入导航栏组件
<tabBar :current=item_index></tabBar>

//标记状态,是的导航栏可以根据页面显示不同的激活状态
data() {
     return {
       item_index: 0,
     }
}

//隐藏微信自带的导航栏
onLoad() {
     wx.hideTabBar();
},

5、展示效果

微信小程序自定义底部导航栏组件

来源:https://blog.csdn.net/weixin_43865030/article/details/120852452

标签:微信小程序,导航栏
0
投稿

猜你喜欢

  • 接口数据安全保证的10种方式

    2022-06-08 08:59:35
  • CentOS7.3下mysql 8.0.13安装配置方法图文教程

    2024-01-23 09:42:10
  • mybatis分页插件pageHelper详解及简单实例

    2024-01-19 17:35:25
  • SQL语句实现删除重复记录并只保留一条

    2024-01-13 21:19:23
  • asp如何将数字转化成条形图?

    2009-12-03 20:19:00
  • python基础之迭代器与生成器

    2022-02-20 07:07:54
  • Oracle 9i产品文档

    2010-07-16 13:35:00
  • mysql 5.7.13 安装配置方法图文教程(linux)

    2024-01-27 20:46:37
  • Python实现注册登录功能

    2023-09-07 22:24:50
  • 关于window.opener的用法

    2008-02-23 11:03:00
  • MySQL性能分析工具profile使用教程

    2024-01-18 15:37:01
  • MySQL两种识别是否有中文字符的方法

    2011-01-04 20:11:00
  • Go外部依赖包从vendor,$GOPATH和$GOPATH/pkg/mod查找顺序

    2024-04-28 10:49:59
  • Bootstrap风格的WPF样式

    2024-05-02 17:32:17
  • python3 实现自定义切片类为左闭右闭详情

    2022-11-02 11:36:51
  • python实现图像识别功能

    2023-08-09 08:45:00
  • 使用keras做SQL注入攻击的判断(实例讲解)

    2024-01-25 12:40:36
  • 一篇文章告诉你如何用python进行自动化测试,调用c程序

    2021-10-08 09:14:49
  • pycharm安装包失败的解决方法

    2022-03-29 04:24:04
  • 深入SQL Cursor基本用法的详细介绍

    2024-01-12 22:05:06
  • asp之家 网络编程 m.aspxhome.com