用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序全屏模式(自定义导航栏)

Rolan 2019-5-6 00:53

导航栏背景图要自定义导航栏,首先需要在app.json里设置:{"window": { "navigationStyle": "custom" }}设置之后进入小程序就只剩下右上角的胶囊了。在设置导航栏样式时需要知道它的高度,在app.json的onLaunch里获 ...

导航栏背景图

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

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

设置之后进入小程序就只剩下右上角的胶囊了。 
在设置导航栏样式时需要知道它的高度,在app.json的onLaunch里获取状态栏高度:

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

44是导航栏除去状态栏的高度,单位px。 
因为导航栏每个页面都会用到,所以我们用组件会方便使用一些,这里创建一个叫nav的组件: 
首先在组件js里设置statusBarHeight和一个可以通过外部设置状态栏颜色的backgroundColor的属性,默认透明。 


nav.js:

  1. const app = getApp()
  2. Component({
  3. options: {
  4. multipleSlots: true
  5. },
  6. properties: {
  7. backgroundColor:{
  8. type: String,
  9. value: 'rgba(0,0,0,0)'
  10. }
  11. },
  12. data: {},
  13. ready() {
  14. let {
  15. statusBarHeight,
  16. navBarHeight
  17. } = app.globalData;
  18. this.setData({
  19. statusBarHeight,
  20. navBarHeight
  21. })
  22. },
  23. methods: {
  24. back() {
  25. wx.navigateBack({
  26. delta:1
  27. })
  28. }
  29. }
  30. })

content里放置内容,返回按钮固定在左边。 
nav.wxml:

  1. <view class='nav-wrap' style="background-color:{{bgColor}};">
  2. <view style="height:{{statusBarHeight}}px;"></view>
  3. <view class='content'>
  4. <slot name="content"></slot>
  5. <view class='back' bindtap='back'></view>
  6. </view>
  7. </view>
  8. nav.wxss:
  9. .nav-wrap {
  10. position: fixed;
  11. top: 0;
  12. left: 0;
  13. width: 750rpx;
  14. z-index: 1;
  15. }
  16. .content {
  17. position: relative;
  18. width: 100%;
  19. height: 44px;
  20. }
  21. .back {
  22. position: absolute;
  23. left: 0;
  24. top: 0;
  25. width: 88px;
  26. height: 44px;
  27. background: pink;
  28. }

在页面中使用:

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

效果图:

效果图

这里txt里的样式、内容都是可以自定义的,如果想要使用通用样式,可以写在组件里。 
比如把导航栏title放在组件里,通过外部传值设置: 
nav.js:

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

nav.wxml:

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

nav.wxss:

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

调用就可以了。 
在第一次使用nav组件的页面代码中,page content是看不见的,因为是直接从状态栏开始显示的,被nav挡住了。 
这里可以加一个高度为导航栏高度的view当做顶部padding: 
nav.wxml

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

这里在properties里设置了一个hastop,用来控制是否有顶部padding。 
页面中:

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

这样就可以显示出来了:

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

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

nav.wxss

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

页面:

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

导航栏背景图

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

  1. <nav title="Nav title"></nav>
  2. <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(不代表最低版本,只供调试用)可方便切到旧视觉

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: tomfriwel 来自: 简书