[移动开发]小程序自定义导航栏使用整理

一、如何开启自定义导航栏

从页面配置或者全局配置修改navigationStyle的属性

navigationStyle：

导航栏样式，仅支持以下值：
default?默认样式
custom?自定义导航栏，只保留右上角胶囊按钮。

自定义导航栏后图片背景就可以全屏展示。

二、处理自定义导航栏高度位置

使用wx.getWindowInfo()返回结果statusBarHeight的高度

返回按钮事件处理：

    //返回按钮事件
    backClick() {
        var pages = getCurrentPages();
        console.info(pages);
        if (pages.length == 1) {
            //返回首页
            wx.reLaunch({
                url: '/pages/index/index',
            })
        } else {
            //返回上一页
            wx.navigateBack({
                delta: 0,
            })
        }
    },

三、使用案例

1.css

.fixedTool {
	position: fixed;
	left: 20px;
	top: 20px;
}

.backBtn {
	width: 30px;
	height: 30px;
	border: 1px solid red;
	font-size: 10px;
	text-align: center;
	line-height: 30px;
}

2.wxml+js

<view class="fixedTool" style="top:{{toolTop}}px;">
	<view class="backBtn">
		返回
	</view>
</view>

        wx.getSystemInfo({
          success: (result) => {
            console.info(result);
            _this.setData({
                toolTop:result.statusBarHeight
            });
          },
        });

显示结果：

更多：

微信小程序保存视频到相册wx.saveVideoToPhotosAlbum（）

wx.scanCode(Object object)使用详解

微信小程序录音接口使用整理-RecorderManager