首页 > 微信 > 详细

小程序 mpvue自定义底部导航栏

时间:2019-03-14 13:23:09      阅读:1430      评论:0      收藏:0      [点我收藏+]

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
 
大功告成!!!!

小程序 mpvue自定义底部导航栏

原文:https://www.cnblogs.com/mcll/p/10529631.html

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!