自定义导航栏

项目中需求: 导航栏在插画上, 这时需要采用自定义导航栏实现.

在json配置中把navigationStyle设置为custom, 这时只会保留右上角胶囊按钮.

公共的导航栏编写一个自定义组件调用.

欢迎大神们指教…

文章目录

自定义导航栏
- 效果图
- 创建组件
- - json
  - wxml
  - wxss
  - js
- 组件使用步骤:
- - app.json
  - app.js
  - page.js
  - page.wxml
  - page.json
- 图二插画背景使用
- - wxml
  - wxss

效果图

创建组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成.

首先需要在 json 文件中进行自定义组件声明, 将component 字段设为 true

custom-component

Component

新建文件夹components
在components新建组件navbar
在navbar组件对应文件上写code

json

首先在json文件中, 将 component 字段设为 true 可这一组文件设为自定义组件

{"component": true
}

wxml

<!--components/navbar/navbar.wxml-->
<view><view class='nav bg' style='height:{{navH}}px'><view class='nav-title'>{{pageName}}<image src='/libs/assets/images/goBack.png' mode='aspectFit' class='back' bindtap='navBack'></image></view></view>
</view>

wxss

/* components/navbar/navbar.wxss */.nav {width: 100%;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 10;
}.nav-title {width: 100%;height: 45px;line-height: 45px;text-align: center;position: absolute;bottom: 0;left: 0;z-index: 10;font-family: PingFang-SC-Medium;font-size: 34rpx;color: #fff;letter-spacing: 1px;
}.nav .back {width: 20px;height: 20px;position: absolute;bottom: 0;left: 0;padding: 10px 15px;
}.bg {background-color: #345098;
}

js

// components/navbar/navbar.jsconst app = getApp();Component({/*** 组件的属性列表*/properties: {pageName: String,},/*** 组件的初始数据*/data: {navH: 0,navbarData: {showCapsule: 1}},lifetimes: {attached: function () {this.setData({navH: app.globalData.navHeight})}},/*** 组件的方法列表*/methods: {//回退navBack: function () {wx.navigateBack({delta: 1})}}
})

组件使用步骤:

需在app全局中进行相关操作, 2. 在需要中page中使用该组件

app.json

在app.json下的window配置 navigationStyle为custom

"window": {"navigationStyle": "custom"
},

app.js

注意: 在app.js中 全局定义导航高度navHeight, 否则有可能遇到navHeight为undefined

/*** 获取手机系统信息*/
wx.getSystemInfo({let that = this;success: res => {//导航高度  状态栏高度 + 导航栏高度44(这时写46)that.globalData.navHeight = res.statusBarHeight + 46;}, fail(err) {console.log(err);}
})/**
* 全局变量
*/
globalData: {navHeight: 0,
}

page.js

在需要的页面.js中获取 导航栏高度

const app = getApp();Page({/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({navH: app.globalData.navHeight})},
})

page.wxml

在需要的页面.wxml中使用navbar组件

注意: 默认会给导航栏覆盖, 需设置属性等margin-top或height:calc(100vh - {{navH}}各所需

<view class='indexWrap'><!-- navbar组件 --><navbar page-name="当前title"></navbar><!--内容--><view class='content' style='margin-top: {{navH}}px'></view>
</view>

page.json

引入navbar组件, 注意路径

"usingComponents": {"nav-bar": "/commpents/navbar/navbar",
}

图二插画背景使用

图二有插画, 这时不能引入公共的组件直接使用了. 需进行修改如下

wxml

使用 wx.getSystemInfoSync()['statusBarHeight']则能获取到顶部状态栏的高度，单位为px.
iPhonex、xr、max等状态栏高度为90px, 其他小屏iPhone设备为66px。

<view class='userWrap'><!-- 背景插画 --><view class='userBg'><!-- 导航栏  style='height:{{navH}}px' --><view class='customNav' style='padding-top:{{navH}}px'><view class='nav-title'>我的<image src='/libs/assets/images/goBack.png' mode='aspectFit' class='back' bindtap='navBack'></image></view></view><!-- 内容同样距离顶部状态栏的高度--><view class="headBox" style='padding-top:{{navH}}px'></view></view>
</view>

wxss

.userBg {margin: 0 auto;@include wh(100%, 300rpx);@include bis("背景图片");
}/** 自定义导航栏 */
.customNav {width: 100%;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 10;display: flex;align-items: center;.nav-title {width: 100%;height: 45px;line-height: 45px;text-align: center;position: absolute;bottom: 0;left: 0;z-index: 10;font-family: PingFang-SC-Medium;font-size: 36rpx;color: #fff;letter-spacing: 1px;}.back {width: 20px;height: 20px;position: absolute;bottom: 0;left: 0;top: 50%;transform: translateY(-50%);padding: 0px 30rpx;display: flex;align-self: center;align-items: center;}
}

感谢大神们

参考一

参考二

微信小程序自定义navbar相关推荐

微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义navigationbar与下拉刷新思考
第一次开发小程序,产品提出要求导航栏字体样式,然后系统的未提供修改的接口. 那么只能自定义导航栏才行呀. 迅速的自定义了一个导航栏 app.json中添加 "navigationStyle& ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...

微信小程序自定义navbar

自定义导航栏

文章目录

效果图

创建组件

json

wxml

wxss

js

组件使用步骤:

app.json

app.js

page.js

page.wxml

page.json

图二插画背景使用

wxml

wxss

微信小程序自定义navbar相关推荐

最新文章

热门文章