uniapp自定义导航栏样式，自定义导航栏组件使用说明，兼容小程序和H5及各端

实现思路：

把底部导航做成一个组件，点击导航显示的页面也做成组件，在启动页面引入这四个组件，点击封装的导航组件就显示相应的组件页面，这样就不会出现页面重新加载的问题了，有个弊端就是导航页面不能使用页面的生命周期，需要使用组件的生命周期，例如onLoad 和onShow 就是页面生命周期，可以使用 created 代替，下面看看实现步骤。

实现步骤：

1. 使用 colorui UI库

下载colorui ui库-[github](https://github.com/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.curthis.$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.urlthis.$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及各端相关推荐

uniapp支付之App、小程序、H5（微信端）、支付宝、百度支付、头条支付
APP支付(内置) appPay.js /*** 5+App支付,仅支持支付宝以及微信支付** 支付宝Sdk集成,微信sdk未集成** @param : provider(String) ->被 ...
uni-app一端开发实现微信小程序，H5，安卓端开发
最近闲来没事使用uni-app给自己写个小程序,又想上到H5,跟安卓上所以就开始捣鼓了,看官网挺简单的.就是vue+微信小程序的结合体:so开始- 首先下载个HBuilderX下载地址:然后去登录没有 ...
uniapp图片上传与压缩，兼容小程序与H5
图片上传借助了Uview2.0的组件 <u-upload :fileList="imgs" :name="" @afterRead="after ...
uni-app开发微信小程序，H5 关于压缩上传图片的问题
文章目录前言一.为什么要压缩图片二.图片压缩方式 1. 微信小程序 2. H5 总结前言关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
更方便！微信小程序任务栏功能升级：增加「我的小程序」
为了让用户更方便地使用小程序,微信公众平台今天宣布,升级小程序任务栏功能.新功能将支持用户打开最近使用过的小程序和「我的小程序」,「我的小程序」的个数上限将提高到 50 个. 此外,原有的星标功能,将 ...
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
小程序组件onload_微信小程序自定义组件踩坑教程
微信小程序不支持自定义组件,只提供了一个非常受限制的模板功能,尤其缺乏了开发产品中最重要的几个功能:模板内的数据只能由当前页面传递,无法预先设置一些初始化数据以达到复用的目的: 模板内的数据变化无法通 ...
uniapp开发：瀑布流灵活配置简单易用兼容vue2vue3小程序、H5、app等多端
概要支持的平台使用方式属性说明事件说明组件方法 refresh的使用示例隐藏单项图片示例完整示例温馨提示关注我,不迷路概要 custom-waterfalls-flow是一个瀑布流 ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...

uniapp自定义导航栏样式，自定义导航栏组件使用说明，兼容小程序和H5及各端

实现思路：

实现步骤：

uniapp自定义导航栏样式，自定义导航栏组件使用说明，兼容小程序和H5及各端相关推荐

最新文章

热门文章