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

前言

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

总结

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

(0)

相关推荐

  • 小程序组件之自定义顶部导航实例

    前言 微信小程序凭借着"不占内存,即用即走"等特点,加上微信的社交的属性,其用户量一路保持快速的增长.对其的应用要求也日渐增高,使用更多样化.个性化.其中,对顶部导航的自定义实现,因交互功能成了一个普遍需要实现的组件,而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点. 下面我们从对其的设计.实现.使用上进行详细阐述,让大家更加了解这个组件.原创文章,若有写的不妥之处,欢迎大家指出更正. 自定义导航的设计 界面设计 目前,大多小程序对自定义导航的设计是:标题居中

  • 微信小程序自定义底部导航带跳转功能

    本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

  • 微信小程序 基础组件与导航组件详细介绍

    微信小程序 基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator)  1.基础组件    1.1 图标 icon (1)总结 (2) 案例 效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu

  • 小程序实现自定义导航栏适配完美版

    1.发现问题 小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下),这极大的提升了小程序开发的自由度,相信不少小伙伴已经使用过这个功能,同时也相信不少小伙伴在此功能开发过程中踩过同样的一些坑: 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一: 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮: 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂. 同样的,这些问题也是小灰经历过的.但是小灰相信,办法总比问题多,于是开始了自己的探究

  • 小程序自定义单页面、全局导航栏的实现代码

    需求 产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的. 需求分析并制定方案 这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案:1.可以添加悬浮按钮.2.自定义导航栏. 添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好.所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图

  • 微信小程序自定义导航栏

    本文实例为大家分享了微信小程序自定义导航栏,供大家参考,具体内容如下 在微信小程序中导航栏是可以直接配置的: 目前只支持二种,但是我们的需求可能需要一个其他的颜色等,那么不得不修改这个了, "window":{ "navigationStyle": "custom" }, 我就配置了这个属性,现在来看看我的界面 红色箭头指向的是配置后自动生成的,我没有写任何代码,比如我在更多界面导航栏需要自定义,那么在more.js中在onLoad()方法中获取

  • 详解mpvue中小程序自定义导航组件开发指南

    这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是

  • 微信小程序自定义导航隐藏和显示功能

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

  • 微信小程序自定义导航栏实例代码

    背景 在做快狗打车小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听.定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 我们希望的是:在各个机型页面上title一致性 & 个性化展示.取得左上角点击事件控制权及深层级页面的一键返回 实现 step1 自定义 第一步 取得导航栏的控制权 小程序支持自定义导

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

    前言 本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见github,请点击地址 (本地下载),其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPhone X,小米8等)会比其他的手机高很多,第二部分为titleBarHeight,安卓和IOS的高度不同,但是IOS高度是一样的,IOS高度是一样的, 所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statu

  • 小程序自定义导航栏兼容适配所有机型(附完整案例)

    前言 大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ,但有时候我们需要在导航栏集成搜索框.自定义背景图.返回首页按钮等. 思路 隐藏官方导航栏 获取胶囊按钮.状态栏相关数据以供后续计算 根据不同机型计算导航栏高度 编写新的导航栏 页面引用自定义导航 正文 隐藏官方导航栏 隐藏导航栏可以全局配置,也可以单独页面配置,具体根据业务需求来. 全局隐藏 //app.json "window": { "navigationStyle": "

  • 微信小程序自定义导航栏(模板化)

    前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug 这次用模板化又搞了一遍 优化了下Android与IOS 显示更接近微信原生的导航栏,以及修复分享页面不显示返回首页按钮 如果大家不习惯模板化的话可以 针对自己的需求拿以前封装的组件化做一些修改 微信小程序自定义导航栏(组件化) CustomNavBar.wxml <template name="CustomNavBar"> <block wx:if="{{ showNavB

  • uniapp微信小程序自定义导航栏的全过程

    目录 前言 那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结 前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点 首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序

  • 微信小程序自定义导航的方法

    本文实例为大家分享了微信小程序自定义导航的具体代码,供大家参考,具体内容如下 在app.js中获取状态栏信息和胶囊按钮信息 onLaunch() {     // 展示本地存储能力     const logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs)     // 获取系统信息     this.globalData.systemInfo

  • 微信小程序自定义导航栏效果

    本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 第一步 添加属性 “navigationStyle”: “custom” 全局: app.json中添加属性 “navigationStyle”: “custom” "window": {     "backgroundTextStyle": "light",     "navigationBarBackgroundColor": "#f

  • 微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

    前言 navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊.搜索框+返回按钮+胶囊等). 思路 隐藏原生样式 获取胶囊按钮.状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度,进行适配 编写新的导航栏 引用到页面 正文 一.隐藏原生的navigationBar window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式. "wind

随机推荐