微信小程序自定义导航教程(兼容各种手机)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序自定义导航教程(兼容各种手机),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5162字,纯文字阅读大概需要8分钟。
内容图文
![微信小程序自定义导航教程(兼容各种手机)](/upload/InfoBanner/zyjiaocheng/334/546507cce1dc43f88a8a3c4f8aeb0487.jpg)
前言
本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址 (本地下载),其中有原生小程序的实现,也有wepy版本的实现
了解小程序默认导航
如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小米8等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的,
所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight
第一步:全局设置
把app.json中的window中的navigationStyle设置为custom,官方文档链接
设置完之后发现导航栏变成了如下图所示,只剩下了右上角胶囊按钮
第二步:确定导航栏两部分的高度
(1)确定第一部分statusBarHeight的高度,这部分是手机用来展示时间,信号和手机电量的,我们可以从wx.getSystemInfo从获得
wx.getSystemInfo({ success: function(res) { console.log(res.statusBarHeight) } })
(2)第二部分titleBarHeight为小程序导航栏的高度,经过我查询无数文档和实践得知,在iPhone上titleBarHeight=44px
,在安卓上titleBarHeight = 48px
(3)最后总结一下微信小程序的高度代码为
wx.getSystemInfo({ success: function(res) { let titleBarHeight = 0 if (res.model.indexOf('iPhone') !== -1) { titleBarHeight = 44 } else { titleBarHeight = 48 } that.setData({ statusBarHeight: res.statusBarHeight, titleBarHeight: titleBarHeight }); }, failure() { that.setData({ statusBarHeight: 0, titleBarHeight: 0 }); } })
第三步:编写Navigation组件
(1)Navigation.js
const app = getApp(); Component({ properties: { //小程序页面的标题 title: { type: String, default: '默认标题' }, //是否展示返回和主页按钮 showIcon: { type: Boolean, default: true } }, data: { statusBarHeight: 0, titleBarHeight: 0, }, ready: function () { // 因为每个页面都需要用到这连个字段,所以放到全局对象中 if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) { this.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }); } else { let that = this wx.getSystemInfo({ success: function(res) { if (!app.globalData) { app.globalData = {} } if (res.model.indexOf('iPhone') !== -1) { app.globalData.titleBarHeight = 44 } else { app.globalData.titleBarHeight = 48 } app.globalData.statusBarHeight = res.statusBarHeight that.setData({ statusBarHeight: app.globalData.statusBarHeight, titleBarHeight: app.globalData.titleBarHeight }); }, failure() { that.setData({ statusBarHeight: 0, titleBarHeight: 0 }); } }) } }, methods: { headerBack() { wx.navigateBack({ delta: 1, fail(e) { wx.switchTab({ url: '/pages/main/main' }) } }) }, headerHome() { wx.switchTab({ url: '/pages/main/main' }) } } })
(2) Navigation.wxml
<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"> <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"> <view wx:if="{{showIcon}}" class="title-bar"> <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view> <view class="line"></view> <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view> </view> <view class="header-title">{{title}}</view> </view> </view>
css就不贴了,有点多,需要的朋友可以去的github上拿 点击地址(本地下载)
第四步:展示效果
iPhone X展示效果
iPhone 7展示效果
小米8展示效果
用我们公司的测试机基本上都试了一遍,基本上都能正常显示,别问我为什么样式和右边这么相似,因为我是叫公司设计给了我样式
解决下拉刷新的问题
图一为默认导航下的下拉刷新,显示正常,图二为自定义导航栏下的下拉刷新,显示异常,中间有一大块空白。
如果解决这个问题,我们自定义一个加载动画,藏在导航底下
(1)把app.json中的window设置为如下,这样加载动画就隐藏了,因为加载动画必须要设置window的backgroundTextStyle=black
和backgroundColor=#F3F3F3
才会显示如上图所示
window: { "navigationStyle": "custom", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ICY买手店", "navigationBarTextStyle": "black"}
(2)修改Navigation.wxml
<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"> <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px"> <view wx:if="{{showIcon}}" class="title-bar"> <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view> <view class="line"></view> <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view> </view> <view class="header-title">{{title}}</view> </view> <view class="loading-wrap"><image class="loading-gif" src="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view> </view>
效果如下图,加载动画我可能写的不太好看
问题:这样做在iPhone上是能正常展示的,但是在安卓上还有一点小问题,自定义导航栏的标题和图标有一起滑动
注意点
(1)安卓手机下拉刷新还是会有一点点展示问题
(2)项目所有fixed的元素都需要改,top需要加上导航栏的高度
目前哪些小程序在用自定义导航栏
我所知道的有 “bilibili”,"票圈长视频",我们公司的小程序也在计划用
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的微信小程序自定义导航教程(兼容各种手机)全部内容,希望文章能够帮你解决微信小程序自定义导航教程(兼容各种手机)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。