php做app底部导航菜单,自定义app底部导航

注意如果是嵌套在微信里的h5 该底部菜单不能用fixed定位 要用absolute

navBar.vue组件

{{item.title}}

export default {

name: "nav-bar",

props: ["page"],

data() {

return {

path:"/",

List:[{ //图片和路由等信息根据自己情况自行更改

logo: require('../assets/navbar/1.png'),

logo_active: require('../assets/navbar/1_a.png'),

title:"自查",

page:1,

path:"/"

},{

logo: require('../assets/navbar/2.png'),

logo_active: require('../assets/navbar/2_a.png'),

title:"考试",

page:2,

path:"/examination"

},{

logo: require('../assets/navbar/3.png'),

logo_active: require('../assets/navbar/3_a.png'),

title:"培训",

page:3,

path:"/train"

},{

logo: require('../assets/navbar/4.png'),

logo_active: require('../assets/navbar/4_a.png'),

title:"我的",

page:4,

path:"/my"

}]

}

},

methods: {

navTo(path) {

if(this.path != path){

this.path = path;

this.$router.push(path)

}

},

},

}

css

.nav-bar-block {

width: 100%;

height: 50px;

background: #fff;

opacity: 0.96;

position: fixed;

z-index: 100;

left: 0;

bottom: 0;

display: flex;

justify-content: space-around;

box-sizing: border-box;

padding: 0.133333rem 0;

.nav_logo{

img{

width: 22px;

height: 22px;

border: none;

}

}

.item {

width: 1.2rem;

text-align: center;

span {

display: block;

width: 100%;

text-align: center;

font-size: 10px;

font-weight: 400;

line-height: 14px;

}

}

._true {

color: #2A7EFB;

}

._false {

color: #6E737D;

}

.item:nth-child(1) img {

// width: 0.506666rem;

// height: 0.506666rem;

}

}

调用nav组件的首页

//template

// script

import navBar from '@/components/navBar.vue’

//export default{ ····

components:{

navBar

}