本文介绍: 2、在需要显示自定义底部导航的页面中，引入和使用自定义底部导航组件。表示当前选中的底部标签的索引。点击底部标签时，调用。字段，用于表示每个底部标签的图标和文本。数组，渲染每个底部标签项的图标和文本。事件，将选中的标签索引传递给父组件。1、自定义底部导航组件接收一个。数组作为参数，每个数组项包含。方法切换底部导航，并通过。
1、自定义底部导航组件接收一个tabs数组作为参数，每个数组项包含icon和text字段，用于表示每个底部标签的图标和文本。通过遍历tabs数组，渲染每个底部标签项的图标和文本。activeIndex表示当前选中的底部标签的索引。点击底部标签时，调用switchTab方法切换底部导航，并通过$emit触发switchTab事件，将选中的标签索引传递给父组件。
<template>
<view class="custom-tab-bar">
<view class="tab-bar-item" v-for="(item, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="switchTab(index)">
<!-- 图标 -->
<image :src="item.icon" class="tab-bar-icon"></image>
<!-- 文字 -->
<text>{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
props: {
tabs: {
type: Array,
default: () => []
},
activeIndex: {
type: Number,
default: 0
}
},
methods: {
switchTab(index) {
// 切换底部导航
this.$emit("switchTab", index);
}
}
};
</script>
<style scoped>
.custom-tab-bar {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #fff;
}
.custom-tab-bar .tab-bar-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
}
.custom-tab-bar .tab-bar-item.active {
color: #007aff;
}
.custom-tab-bar .tab-bar-icon {
width: 24px;
height: 24px;
margin-bottom: 4px;
}
</style>
2、在需要显示自定义底部导航的页面中，引入和使用自定义底部导航组件。例如，在pages文件夹下的home页面中，可以添加以下代码:
<template>
<view>
<!-- 页面内容... -->
</view>
<!-- 引入自定义底部导航 -->
<custom-tab-bar :tabs="tabs" :activeIndex="activeTab" @switchTab="switchTab"></custom-tab-bar>
</template>
<script>
import CustomTabBar from "@/components/CustomTabBar";
export default {
components: {
CustomTabBar
},
data() {
return {
tabs: [
{ icon: "icon-home", text: "首页" },
{ icon: "icon-category", text: "分类" },
{ icon: "icon-cart", text: "购物车" },
{ icon: "icon-mine", text: "我的" }
],
activeTab: 0
};
},
methods: {
switchTab(index) {
// 切换底部导航
this.activeTab = index;
// 根据索引进行相应的页面切换或逻辑处理
// ...
}
}
};
</script>
原文地址:https://blog.csdn.net/qq_45914628/article/details/136000609
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_67515.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
