未分类

微信小程序全屏模式（自定义导航栏）

微信小程序

要自定义导航栏，首先需要在app.json里设置：

1
2
3
4
5
{
"window": {
        "navigationStyle": "custom"
    }
}

设置之后进入小程序就只剩下右上角的胶囊了。

在设置导航栏样式时需要知道它的高度，在app.json的onLaunch里获取状态栏高度：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
App({
    onLaunch: function(options) {
        wx.getSystemInfo({
            success: (res) => {
                this.globalData.statusBarHeight = res.statusBarHeight
                this.globalData.navBarHeight = 44 + res.statusBarHeight
            }
        })
    },
    globalData: {
        statusBarHeight: 0,
        screenHeight: 0
    }
})

44是导航栏除去状态栏的高度，单位px。

因为导航栏每个页面都会用到，所以我们用组件会方便使用一些，这里创建一个叫nav的组件：

首先在组件js里设置statusBarHeight和一个可以通过外部设置状态栏颜色的backgroundColor的属性，默认透明。

nav.js:

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
const app = getApp()
Component({
    options: {
        multipleSlots: true
    },
    properties: {
        backgroundColor:{
            type: String,
            value: 'rgba(0,0,0,0)'
        }
    },
    data: {},
    ready() {
        let {
            statusBarHeight,
            navBarHeight
        } = app.globalData;

        this.setData({
            statusBarHeight,
            navBarHeight
        })
    },
    methods: {
        back() {
            wx.navigateBack({
                delta:1
            })
        }
    }
})

content里放置内容，返回按钮固定在左边。

nav.wxml:

1
2
3
4
5
6
7
<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <slot name="content"></slot>
        <view class='back' bindtap='back'></view>
    </view>
</view>

nav.wxss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    z-index: 1;
}

.content {
    position: relative;
    width: 100%;
    height: 44px;
}

.back {
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    height: 44px;
    background: pink;
}

在页面中使用：

1
2
3
4
5
6
<nav bgColor="black">
    <view slot="content">
        <view class='txt'>Nav title</view>
    </view>
</nav>
<view>page content</view>

效果图：

这里txt里的样式、内容都是可以自定义的，如果想要使用通用样式，可以写在组件里。

比如把导航栏title放在组件里，通过外部传值设置：

nav.js:

1
2
3
4
5
6
7
8
9
10
Component({
    // ...
    properties: {
        title:{
            type: String,
            value: ''
        }
    },
    // ...
})

nav.wxml:

1
2
3
4
5
6
7
<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class="title">{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>

nav.wxss:

1
2
3
4
5
6
7
8
/* ... */
.title {
    color: white;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
}
/* ... */

调用<nav bgColor="black" title="hello">就可以了。

在第一次使用nav组件的页面代码中，page content是看不见的，因为是直接从状态栏开始显示的，被nav挡住了。

这里可以加一个高度为导航栏高度的view当做顶部padding：

nav.wxml

1
2
3
4
5
6
7
8
<view class='nav-wrap' style="background-color:{{bgColor}};">
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class="title">{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>

这里在properties里设置了一个hastop，用来控制是否有顶部padding。

页面中：

1
2
<nav bgColor="black" title="Nav title" hastop></nav>
<view>page content</view>

这样就可以显示出来了：

导航栏背景图

还可以做导航栏背景图，添加一个image，绝对定位放置在nav-wrap底部：

nav.wxml

1
2
3
4
5
6
7
8
9
<view class='nav-wrap' style="background-color:{{bgColor}};">
    <image class='bgimg' wx:if="{{bgsrc}}" src='{{bgsrc}}' mode='aspectFill'></image>
    <view style="height:{{statusBarHeight}}px;"></view>
    <view class='content'>
        <view class='title'>{{title}}</view>
        <view class='back' bindtap='back'></view>
    </view>
</view>
<view wx:if="{{hastop}}" class='padding' style="width:100;height:{{navBarHeight}}px;"></view>

nav.wxss

1
2
3
4
5
6
7
.bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

页面：

1
2
<nav bgColor="black" title="Nav title" hastop bgsrc="/images/bg.jpeg"></nav>
<view>page content</view>

全屏背景

将bgColor、hastop、bgsrc都去掉，在页面中放置一个position: fixed;，并且铺满全屏的图片。

1
2
<nav title="Nav title"></nav>
<image class='pagebg' src='/images/bg.jpeg' mode='aspectFill'></image>

back的内容自定义就行了，我这里只是简单放置了一个色框。

注意事项

官方文档中的注意事项：

  • 注1：HexColor（十六进制颜色值），如”#ff00ff”
  • 注2：关于navigationStyle
    • 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
    • 客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效
    • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

微信官方文档：全局设置

声明：转载请注明作者及原文链接
分享到