微信小程序自定义导航教程(兼容各种手机)


Posted in Javascript onDecember 12, 2018

前言

本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见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=blackbackgroundColor=#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”,"票圈长视频",我们公司的小程序也在计划用

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
express express-session的使用小结
Dec 12 #Javascript
解决vue移动端适配问题
Dec 12 #Javascript
js中位运算的运用实例分析
Dec 11 #Javascript
js中的数组对象排序分析
Dec 11 #Javascript
详解Vue源码之数据的代理访问
Dec 11 #Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 #Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
react-router实现按需加载
2017/05/09 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
写景作文评语集锦
2014/12/25 职场文书
教师工作表现评语
2014/12/31 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
同学聚会通知短信
2015/04/20 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
刘胡兰观后感
2015/06/16 职场文书
高中班长竞选稿
2015/11/20 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
Python 制作自动化翻译工具
2021/04/25 Python