微信小程序自定义底部导航栏组件
作者: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