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


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中的类继承
Nov 25 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
js实现音乐播放控制条
Sep 09 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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学习之数据类型之间的转换代码
2011/05/29 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
使用URL传输SESSION信息
2015/07/14 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
php判断目录存在的简单方法
2019/09/26 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python读取word文档的方法
2015/05/09 Python
python正则表达式的使用
2017/06/12 Python
python select.select模块通信全过程解析
2017/09/20 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
对python 调用类属性的方法详解
2019/07/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
导游个人求职信
2014/04/25 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014年班主任工作总结
2014/11/08 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Python 中的 copy()和deepcopy()
2021/11/07 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL