mpvue小程序 自定义底部导航栏
1.在compontents新建文件放入
<template>
<section class="tabBar-wrap">
<article class="tabBar-box">
<ul class="tabBar-nav" v-if="navList.length > 0">
<li
class="item"
v-for="(item, index) in navList"
@click="selectNavItem(index,item.pagePath)"
:key="index"
>
<p class="item-images">
<img
:src="selectNavIndex === index ? item.selectedIconPath : item.iconPath"
alt="iconPath"
>
</p>
<p
:class="selectNavIndex === index ? 'item-text item-text-active' : 'item-text' "
>{{item.text}}</p>
</li>
<li v-if="needButton" >
<div class="submit-box">
<button
:disabled="!handButton"
@click="bindNavigateTo('../pages/index')"
:class="handButton ? 'submit-box-btn submit-box-btn-active' : 'submit-box-btn' "
>{{ btnText }}</button>
</div>
</li>
</ul>
</article>
</section>
</template>
<script>
export default {
props: ["selectNavIndex", "needButton", "handButton", "btnText"],
data() {
return {
navList: [
{
selectedIconPath: "/static/image/delete.png",
iconPath: "/static/image/delete.png",
pagePath: "../index/main",
text: "首页"
},
{
selectedIconPath: "/static/image/delete.png",
iconPath: "/static/image/delete.png",
pagePath: "../index1/main",
text: "发布"
},
{
selectedIconPath: "/static/image/delete.png",
iconPath: "/static/image/delete.png",
pagePath: "../index2/main",
text: "订单"
}
]
};
},
methods: {
selectNavItem(index, pagePath) {
if (index === this.selectNavIndex) {
return false;
}
console.log(index);
if (index == 0 && this.selectNavIndex == -1) {
this.$emit("fetch-index");
}
this.bindViewTap(pagePath);
},
bindNavigateTo(url) {
wx.navigateTo({
url
});
},
bindViewTap(url) {
let page = getCurrentPages();
console.log(page);
wx.reLaunch({
url
});
}
}
};
</script>
<style scoped>
.tabBar-box {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
border-top: 1px solid #eee;
background-color: #f8f8f8;
}
.tabBar-nav {
width: 100%;
display: flex;
.item {
flex: 1;
text-align: center;
}
.item-text {
color: #666;
font-size: 9px;
transition: 0.24s linear;
}
.item-text-active {
color: #f33f3f;
}
.item-images {
width: 21px;
height: 21px;
margin: 4px auto;
text-align: center;
transition: 0.24s linear;
& img {
display: inline;
}
}
}
.submit-box-btn {
position: relative;
z-index: 999;
width: 85%;
height: 90px;
line-height: 90px;
border-radius: 10px;
color: #404040;
font-size: 36px;
border: none;
background-color: #eee;
text-align: center;
border: 1px solid #eee;
}
.submit-box-btn-active {
color: #fff;
border: none;
border: 1px solid #ff6c00;
background-color: #ff6c00;
}
button {
border: none;
outline: none;
}
</style>
2.在终端下输入命令 npm i vue-style-loader less-loader css-loader vue-loader less
3.在使用的页面引入文件夹
import vueTabBar from "../../components/vueTabBar.vue";
4.
components: {
vueTabBar
}
5.
<vueTabBar :selectNavIndex="selectNavIndex"></vueTabBar>
data中定义
selectNavIndex:0
大功告成!!!!