小程序自定义导航栏返回主页

效果图
在app.js中获取状态栏的高度statusBarHeight
自定义组件navbar.wxml
自定义组件navbar.wxss
自定义组件navbar.json
自定义组件navbar.js
调用组件的页面.json
调用组件的页面.wxml

效果图

在app.js中获取状态栏的高度statusBarHeight

globalData: {statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']}

自定义组件navbar.wxml

<view class="custom " style="padding-top:{{statusBarHeight}}px"><view class='title-container'><view class='capsule' wx:if="{{ back || home }}"><view bindtap='back' wx:if="{{back}}"><image src='img/back.svg'></image></view><view bindtap='backHome' wx:if="{{home}}"><image src='img/home.svg'></image></view></view><view class='title'>{{navigationBarTitle}}</view></view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

自定义组件navbar.wxss

.custom{position: fixed;width: 100%;top: 0;left: 0;height: 45px;background: #1d8be8;z-index: 999;
}.title-container {height: 44px;display: flex;align-items: center;position: relative;
}.capsule {margin-left: 10px;height: 32px;border: 1px solid #fff;border-radius: 16px;display: flex;align-items: center;
}.capsule > view {width: 32px;height: 60%;position: relative;
}.capsule > view:nth-child(2) {border-left: 1px solid #fff;
}.capsule image {width: 60%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
}.title {color: white;position: absolute;left: 104px;right: 104px;font-size: 14px;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}

自定义组件navbar.json

{"component": true
}

自定义组件navbar.js

const app = getApp()
Component({properties: {navigationBarTitle: {type: String,value: ''},back: {type: Boolean,value: false},home: {type: Boolean,value: false}},data: {statusBarHeight: app.globalData.statusBarHeight},methods: {backHome: function () {wx.reLaunch({url: '/pages/index/index',})},back: function () {wx.navigateBack({delta: 1})}}
})

调用组件的页面.json

{"usingComponents": {"navBar": "/pages/common/navbar/navbar",},"navigationStyle": "custom",//导航栏样式，custom 模式可自定义导航栏，只保留右上角胶囊状的按钮."navigationBarBackgroundColor": "#1D8BE8","navigationBarTextStyle": "white"
}

调用组件的页面.wxml

<navBar back home navigationBarTitle="{{navigationBarTitle}}"></navBar>

小程序自定义导航栏返回主页相关推荐

微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
小程序自定义导航栏（完美适配所有手机）解决上下不居中左右不对齐高度不协调问题...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
小程序自定义导航栏适配
小程序自定义导航栏适配(完美版) 1.发现问题小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下),这极大的提升了小程序开发的自由度,相信不少小伙伴已经使 ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...

小程序自定义导航栏返回主页

小程序自定义导航栏返回主页

效果图

在app.js中获取状态栏的高度statusBarHeight

自定义组件navbar.wxml

自定义组件navbar.wxss

自定义组件navbar.json

自定义组件navbar.js

调用组件的页面.json

调用组件的页面.wxml

小程序自定义导航栏返回主页相关推荐

最新文章

热门文章