admin管理员组文章数量:1666861
实现思路:
把底部导航做成一个组件,点击导航显示的页面也做成组件,在启动页面引入这四个组件,点击封装的导航组件就显示相应的组件页面,这样就不会出现页面重新加载的问题了,有个弊端就是导航页面不能使用页面的生命周期,需要使用组件的生命周期,例如onLoad 和onShow 就是页面生命周期,可以使用 created 代替,下面看看实现步骤。
实现步骤:
1. 使用 colorui UI库
下载colorui ui库-[github](https://github/weilanwl/ColorUI);
下载好之后放在 components 目录
2.在 components 目录创建 tabbar.vue 文件,里面代码是:
<template>
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="home">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/home' + [PageCur=='home'?'1':''] + '.png'"></image>
</view>
<view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="nutrition">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/task' + [PageCur == 'nutrition'?'1':''] + '.png'"></image>
</view>
<view :class="PageCur=='nutrition'?'text-green':'text-gray'">充电</view>
</view>
<view class="action" @click="NavChange" data-cur="userCenter">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/user' + [PageCur == 'userCenter'?'1':''] + '.png'"></image>
</view>
<view :class="PageCur=='userCenter'?'text-green':'text-gray'">我的</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
PageCur: 'home'
}
},
methods: {
NavChange: function(e) {
this.PageCur = e.currentTarget.dataset.cur
this.$emit('tabbarChange',this.PageCur)
}
}
}
</script>
<style>
</style>
3.使用示例:
<template>
<view class="">
<view v-if="tab=='home'" class="">
首页
</view>
<Nutrition v-if="tab=='nutrition'"></Nutrition>
<UserCenter v-if="tab=='userCenter'"></UserCenter>
<tabbar @tabbarChange="tabbarChange"/>
</view>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
import Nutrition from '../nutrition/nutrition'
import UserCenter from '../nhs/userCenter'
export default {
components: {
tabbar,Nutrition,UserCenter
},
data() {
return {
tab:'home'
}
},
onLoad() {},
methods: {
tabbarChange(e){
console.log('e',e)
this.tab =e
},
navTo(e) {
console.log('e', e)
let url = e.currentTarget.dataset.url
this.$navTo.navigateTo({
url
})
},
}
}
</script>
<style>
.aaa {
height: 120rpx;
line-height: 120rpx;
margin: 20rpx;
background-color: #00C7DD;
text-align: center;
color: white;
width: 26%;
}
.aaaacc {
margin-top: 10rpx;
display: flex;
flex-wrap: wrap;
margin-left: 5%;
}
</style>
图标:
版权声明:本文标题:uniapp自定义导航栏样式,自定义导航栏组件使用说明,兼容小程序和H5及各端 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1730077339a1221951.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论