实现nav_微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）

前言

微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码来说明实现沉浸式导航栏。

JSON

可以在某个页面的json文件中加也可以在全局的app.json中添加属性和引入组件。 页面文件

{"navigationStyle": "custom"
}

app.json

"window":{"navigationStyle": "custom"},"usingComponents": {"nav-bar": "/component/navBar/navBar"},

navBar.js

这里定义了两个属性title和whetherShow。title是导航栏的标题。whetherShow是为了满足需求定义是否展示返回上一级页面的按钮。此外还调用了微信提供的api wx.getSystemInfoSync()用来获取手机信息判断是否是刘海屏

// component/navBar/navBar.js
Component({/*** 组件的属性列表*/properties: {title: {            // 属性名type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: ''     // 属性初始值（可选），如果未指定则会根据类型选择一个},whetherShow:{type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: ''     // 属性初始值（可选），如果未指定则会根据类型选择一个}},/*** 组件的初始数据*/data: {navigaTitle:'',ws:true,statusBarHeight:''},ready: function() {console.log(wx.getSystemInfoSync())var tempif(this.data.whetherShow=='0'){temp=false}else{temp=true}this.setData({navigaTitle:this.data.title,ws:temp,statusBarHeight:wx.getSystemInfoSync().statusBarHeight})},/*** 组件的方法列表*/methods: {navigateBack:function(){wx.navigateBack({delta: 1,})}}
})

navBar.wxml

<view class="flxr jcb container" style="height:235rpx"><image src="/image/1.jpg" class="img-style" style="height:235rpx"></image><view class="icon flxr aic ml20" bindtap="navigateBack" style="margin-top:{{statusBarHeight}}px"><image wx:if="{{ws}}" src="/image/left.png" class="left"></image><view wx:if="{{ws}}" class="backClass">返回</view></view><view class="title" style="margin-top:{{statusBarHeight}}px">{{title}}</view><view class="icon"></view>
</view>

navBar.wxss

/* component/navBar/navBar.wxss */
@import '/app.wxss';.title {color: #000;height: 50rpx;width: 300rpx;z-index: 2;line-height: 50rpx;text-align: center;font-size: 36rpx;padding-top: 20rpx;
}.container {width: 100%;height: 60px;position: relative;/* background-image: linear-gradient(to right,#FF7C6B,#E33229); */position: fixed;top: 0;z-index: 999;
}.img-style {width: 100%;height: 60px;position: absolute;top: 0;z-index: 1;
}.icon{height: 60rpx;width: 240rpx;z-index: 2;padding-top: 20rpx;
}.left{height: 30rpx;width: 35rpx;
}.backClass{color: #fff;font-size: 30rpx;
}

test1.wxml

<nav-bar title="自定义导航栏" whetherShow="1"></nav-bar>

展示效果

总结

感兴趣的朋友还可以自己加个属性实现导航栏图片的可配置.

实现nav_微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）相关推荐

微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...
微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）
文章目录前言正文 JSON navBar.js navBar.wxml navBar.wxss test1.wxml 展示效果总结前言微信小程序中导航栏一般来说是默认的展示标题等等,可以做的 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
微信小程序沉浸式布局
微信小程序沉浸式布局
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序的自定义导航栏
微信小程序的导航栏主要分为两个部分:状态栏和标题栏. 关于微信小程序的自定义导航栏也就是通过微信小程序官方提供的API接口来算出状态栏和标题栏的高度. 注意获取到的数值单位都是px. 首先要开启自定义 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...