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


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模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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 远程图片保存到本地的函数类
2008/12/08 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
javascript数组去掉重复
2011/05/12 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
python如何把字符串类型list转换成list
2020/02/18 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
运动会广播稿100字
2014/01/11 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
酒店端午节活动方案
2014/08/26 职场文书
化工见习报告范文
2014/10/31 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书