uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色，先上效果

使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。

比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色

全局定义导航栏

"window": {"navigationBarBackgroundColor": "#32A2FD",  // 顶部背景颜色"navigationBarTitleText": "123456",         // 顶部文字"navigationStyle": "default",               // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项"navigationBarTextStyle": "white",          // 顶部文字颜色 仅支持 white/black
},

单页面定义导航栏

"path": "pages/cargo/pickUpGoods",//页面路径
"style": {"navigationBarTitleText": "uni-app", // 顶部文字"navigationBarBackgroundColor": "#fff", // 顶部背景颜色"navigationBarTextStyle": "black" // 顶部文字颜色}

重点来了，导航栏设置渐变色

踩坑，开始我以为把顶部导航栏的颜色换成渐变的就可以了，但是不行

查了之后才知道，设置渐变色要去自定义背景颜色

首先如果是全部页面就在window里面添加，如果是单页面就在页面添加

"navigationStyle": "custom"

"path": "pages/cargo/shipments",
"style": {"navigationBarTitleText": "uni-app","navigationStyle": "custom",//设置自定义导航栏
}

然后，自己封装一个组件，

<template><view class="prohibition"><view class="demo" :style="[{background},{color},{height},{paddingTop}]"><!-- 左侧返回按钮 --><view class="left" @click="onBack" v-if="back" :style="[{color},{paddingTop}]"><uni-icons type="arrowleft" size="30" :color='color'></uni-icons><!-- 此处图标使用的是 uni-ui图标 --></view><!-- 中间标题文字 --><view class="title">{{title}}</view></view></view>
</template><script>export default {data() {return {height: 0, paddingTop: 0,}},// props: ["title", "back"],props:{title:{ // 标题文字(默认为空)type:String,default:''},color:{ // 标题和返回按钮颜色(默认白色)type:String,default:'#fff'},//建议使用background  因为使用backgroundColor，会导致不识别渐变颜色background:{ // 背景颜色(不传值默认透明)type:String,default:'transparent'},back:{ // 是否显示返回按钮(不传值默认不显示)type:Boolean,default:false},},created() {const demo = uni.getMenuButtonBoundingClientRect()this.height = demo.height + "px"this.paddingTop = demo.top + "px"},methods: {// 左侧返回按钮调用onBack() {this.$emit("onBack")}}}
</script>
<style lang="less">.demo {position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值// position: fixed;width: 100%;display: flex;align-items: center;justify-content: center;font-size: 26rpx;z-index: 100;padding-bottom: 10rpx;.left {float: left;position: absolute;width: 100rpx;height: 50rpx;top: 0;bottom: 0;left: 20rpx;color: #fff;margin: auto;}.title {font-size: 36rpx;font-family: Source Han Sans CN;// color: #FFFFFF;}}
</style>

然后，引入你的这个组件，写在页面的最上面

代码在这里

<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>

引入组件，使用

踩了很多坑，制作不易。

uniapp开发微信小程序自定义顶部导航栏相关推荐

微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...

uniapp开发微信小程序自定义顶部导航栏

重点来了，导航栏设置渐变色

uniapp开发微信小程序自定义顶部导航栏相关推荐

最新文章

热门文章