场景：
项目中要求导航栏是渐变色/透明色，像下面这样的效果：
image
image
微信官方提供的导航栏只支持纯色，是无法实现上述效果的。
解决方案：
微信小程序对导航栏提供了两种样式：一种是默认样式，就是支持纯色的那种；另一种是自定义样式，既然是自定义，那我们就可以为所欲为了。嘿嘿
image
为了节约时间，在网上搜了一下微信小程序的自定义导航栏，果然已经有大佬为我们实现：https://blog.csdn.net/qq_33744228/article/details/83656588 但是仅支持纯色和透明色，并且每个页面都要做适配（导航栏会覆盖页面内容，不同高度的导航栏要设置不同的“padding-top”）。
为了满足项目要求，在大佬的代码基础上扩充了如下功能：
1、支持渐变色：
利用CSS3提供的线性渐变（linear-gradient）实现：
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-: 表示适配webkit内核的浏览器；
[<point> || <angle>,]?: 表示渐变的起始位置；
<stop>, <stop> [, <stop>]*: 表示渐变的颜色；
例如：
background: -webkit-linear-gradient(top, orange, blue);
表示背景色从顶部开始由橙色渐变为蓝色。
2、组件内适配所有机型：
可以认为导航栏有两部分组成：状态栏+标题栏。不同的机型状态栏高度可能不同(除了刘海屏状态栏高度是44之外，其他手机状态栏高度都是20)，但标题栏高度都是44。微信小程序为我们提供了获取状态栏高度的方法：
wx.getSystemInfoSync().statusBarHeight
所以导航栏的高度为：
wx.getSystemInfoSync().statusBarHeight + 44
由于我们自定义的导航栏使用固定定位实现的，所以他就脱离了文档流，组件放进去后，会悬浮在上面，遮挡了下面的内容，这时候就需要给父元素加个“padding-top”，“padding-top”的值即是导航栏的高度值。这部分可以写到组件内部实现，不用在每个页面都做一次适配。
具体实现：
通过自定义组件实现，具体怎么自定义组件，可以参考官方文档：《自定义组件》。
一般自定义组件由 json wxml wxss js 4个文件组成，我这里为了方便实现，多加了两个文件：“back.png” 和 “navigation.wxs”：
image
“back.png”是导航栏的返回图标；“navigation.wxs”是为了处理渐变这种逻辑，需要渐变的颜色可以以一个数组形式传进来，使用比较方便。如果其他项目需要使用，只需要把navigation目录拖到项目中即可。下面直接贴出具体的实现代码：
navigation.json:
{
"component": true,
"usingComponents": {}
}
navigation.wxml:
<wxs src="navigation.wxs" module="nav">
</wxs>
<view style="padding-top:{{content_offset ? bar_Height + 44 : 0}}px;">
<view class='navigation status-bar'>
<view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{!show_bol}}'> <!-- 返回按钮 -->
<image src='back.png'></image>
</view>
<view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px; background-color:{{background_color}}; {{nav.linearGradient(linear_gradient, direction, color_stops)}}">
<text style="color:{{title_color}};">{{title}}</text> <!-- 标题 -->
</view>
</view>
</view>
navigation.wxss:
/* 顶部导航 */
.navigation.status-bar {
width: 100%;
z-index: 99998;
position: fixed;
top: 0;
}
.navigation.status-bar .goBack{
position: absolute;
top: 7.5px;
font-size:12pt;
}
.navigation.status-bar .goBack image{
width: 22px;
height: 22px;
padding: 6px 20px 0 15px;
}
.navigation.status-bar .tabar {
display: flex;
justify-content: center;
background: #fff;
}
.navigation.status-bar .tabar2{
background: transparent !important;
}
.navigation.status-bar .tabar2 text{
color: #fff !important;
/* font-weight: lighter !important; */
}
.navigation.status-bar .tabar text {
height: 44px;
line-height: 44px;
/* padding: 10pt 15pt; */
color: #fff;
font-size: 17px;
/* font-weight: bold; */
}
.navigation.status-bar .tabar .active {
color: #fff;
}
navigation.js:
Component({
/* 组件的属性列表 */
properties: {
title: { // 设置标题
type: String,
value: ''
},
title_color: { // 设置标题颜色
type: String,
value: '#fff'
},
show_bol: { // 控制返回箭头是否显示
type: Boolean,
value: true
},
my_class: { // 控制样式(背景是否透明)
type: Boolean,
value: false
},
background_color: {//背景颜色
type: String,
value: "#24AFFF"
},
linear_gradient: { //是否渐变
type: Boolean,
value: true
},
direction: { //颜色渐变方向
type: String,
value: "top"
},
color_stops: { //渐变的起止颜色数组
type: Array,
value: ["#24AFFF", "#EEE"]
},
content_offset: { //内容是否偏移（不让导航栏遮挡内容）
type: Boolean,
value: true
}
},
/* 组件的初始数据 */
data: {
type: "组件",
bar_Height: wx.getSystemInfoSync().statusBarHeight // 获取手机状态栏高度
},
/* 组件的方法列表 */
methods: {
goBack: function () { // 返回事件
console.log("退后")
wx.navigateBack({
delta: 1,
})
}
}
})
navigation.wxs:
var linearGradient = function (isLinearGradient, direction, colorStops) {
if (isLinearGradient) {
return 'background: -webkit-linear-gradient(' + direction + ',' + colorStops.join(",") + ');';
}
return '';
}
module.exports = {
linearGradient: linearGradient
}
下拉刷新问题：
这样实现的导航栏，下拉刷新的动画（三个小圆点）是从屏幕顶部开始的，下拉距离不够大时会被导航栏给盖住。而使用默认的导航栏，下拉刷新动画是从导航栏底部开始的，不会被盖住。
网友评论