【微信小程序开发（二）】自定义导航栏

1 设置小程序通栏，不展示标题导航

每个页面都有自己的json文件配置，如下index.json文件, 他们会覆盖掉app.json已有的配置项

通栏的设置主要是 “navigationStyle”: “custom”,

{
  "usingComponents": {},
  "navigationStyle": "custom",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
1
2
3
4
5
6
7
8
9

效果如下：

2 沉浸式导航

先放效果图：

这里需要注意俩个问题，

1. 导航的适配是需要计算到各种机型的状态栏高度的，
2. 上滑时需要给导航栏一个背景色值，否则导航标题（透明的）会和内容区域重叠

navBar.js

// components/navBar/navBar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        title: {           
            type: String,  
            value: ''    
        },
        scrollTop: {         
            type: String,    
            value: '0',     
            observer: 'update', // 类似于vue的 watch 动态传值
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        navigaTitle:'',
        ws:true,
        statusBarHeight: 20,
        navHeight: 44,
        opacity: 0,
    },

    ready: function() {
        const res = wx.getSystemInfoSync()
        this.data.statusBarHeight = res.statusBarHeight // 系统状态栏高度
        let _res = wx.getMenuButtonBoundingClientRect() // 小程序胶囊按钮
        let navBarPadding = (_res.top - this.data.statusBarHeight) * 2
        this.data.navHeight = _res.height + navBarPadding

        this.setData({
            navigaTitle: this.data.title,
            statusBarHeight: this.data.statusBarHeight,
            navHeight: this.data.navHeight,
        })
    },

    /**
     * 组件的方法列表
     */
    methods: {
        navigateBack: function(){
            wx.navigateBack({
                delta: 1,
            })
        },
        update(newValue) {
            let op = 0;
            if (newValue != 0 && newValue <= 40) {
                op = newValue / 40
            }
            if (newValue >= 40) {
                op = 1;
            }
            this.setData(
                {
                    opacity: op
                }
            )
    	},
    }
})
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

navBar.json

{
  "component": true,
  "usingComponents": {}
}
1
2
3
4

navBar.wxml

<view class="back-nav-bar" style="position:fixed;top:{{statusBarHeight}}px;height:{{navHeight}}px;left:0;">
	<div class="bg-op" wx:if="{{title !== ''}}" style="height:{{statusBarHeight+navHeight}}px;opacity:{{opacity}}">
	</div>
	<div class="left-icon" bindtap="navigateBack">
		<image src="images/back@2x.png" mode='widthFix'></image>
	</div>
	<div class="title">{{title}}</div>
	<div class="icon"></div>
	
</view>

1
2
3
4
5
6
7
8
9
10
11

navBar.wxss

/* component/navBar/navBar.wxss */
.back-nav-bar {
    height: 64rpx;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    position: relative;
}
.bg-op {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #C1CFE5 0%, #DEE4EE 100%);
    z-index: -1;
}

.left-icon {
    width: 48rpx;
    height: 48rpx;
    margin-left: 40rpx;
}
.icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 40rpx;
}
.left-icon image {
    display: block;
    width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在需要使用的页面中引入组件 usingComponents

{
  "usingComponents": {
    "nav-bar": "/components/navBar/navBar"
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "冥想",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "dark"
}
1
2
3
4
5
6
7
8
9
10

在需要使用的wxml文件中引入

<nav-bar title="冥想" scrollTop="{{scrollTop}}"></nav-bar>
1

在页面的js中给scrollTop赋值

  data: {
    scrollTop: 0
  },

  onPageScroll(t) {
    this.setData({
        scrollTop: t.scrollTop
    })
  },

1
2
3
4
5
6
7
8
9
10

至此 大工告成~