小程序 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" style="flex: 3">

<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 lang="less" 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

 

大功告成!!!!