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


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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
详解angular部署到iis出现404解决方案
Aug 14 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php HTML无刷新提交表单
2016/04/05 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Vue基础学习之项目整合及优化
2019/06/02 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python help()函数用法详解
2014/03/11 Python
python处理二进制数据的方法
2015/06/03 Python
python交互式图形编程实例(一)
2017/11/17 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python3的socket使用方法详解
2020/02/18 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
测控技术与仪器个人求职信范文
2013/12/30 职场文书
三八节主持词
2014/03/17 职场文书
商务英语专业求职信
2014/06/26 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
检讨书范文2000字
2015/01/28 职场文书
科技馆观后感
2015/06/08 职场文书
老人与海读书笔记
2015/06/26 职场文书
浅谈MySQL函数
2021/10/05 MySQL