热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容,文中通过示例代码介绍的非常详细,兼容各种手机,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见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


 
 
  
  
  
 
 {{title}}
 

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


 
 
  
  
  
 
 {{title}}
 
 

效果如下图,加载动画我可能写的不太好看

问题:这样做在iPhone上是能正常展示的,但是在安卓上还有一点小问题,自定义导航栏的标题和图标有一起滑动

注意点

(1)安卓手机下拉刷新还是会有一点点展示问题

(2)项目所有fixed的元素都需要改,top需要加上导航栏的高度

目前哪些小程序在用自定义导航栏

我所知道的有 “bilibili”,"票圈长视频",我们公司的小程序也在计划用

总结

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


推荐阅读
  • 微信小順序Markdown、HTML剖析庫(支撐wepy)
    TowxmlTowxml是一個可將HTML、Markdown轉為微信小順序WXML(WeiXinMarkupLanguage)的襯着庫。用於處理在微信小順序中Markdown、HT ... [详细]
  • mpvue-meituanmpvue-meituan是一款使用mpvue开发的实战小程序项目,完全仿制美团官方外卖点餐小程序开发而成,项目的框架结构完全 ... [详细]
  • 微信小程序-实现文字跑马灯-wepy
    百度蛮多例子的,但是代码太长懒得看了前言要实现跑马灯主要就是获得判断开始定界和结束定界,1.9.3新增的wxml操作接口就可以拿到节点长宽等属性,当然你也可以直接用文字数量* ... [详细]
  • 本文探讨了如何有效地构建和优化微信公众平台账号,涵盖了用户信息管理、内容创作与发布、互动策略及数据分析等方面。通过合理设置用户信息字段,如用户名、昵称、密码、真实姓名和性别等,确保账号的安全性和用户体验。同时,文章还介绍了如何利用微信公众平台的各项功能,提升用户参与度和品牌影响力。 ... [详细]
  • 传统|书目_基于微信的图书馆服务系统的设计与实现
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了基于微信的图书馆服务系统的设计与实现相关的知识,希望对你有一定的参考价值。随着时代的快速进步,“互联网&# ... [详细]
  • 大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」) ... [详细]
  • 小程序开发分享
    小程序概述APP和和H5的区别:原生APP是软件开发者开发后,直接在安卓或者iOS系统中直接运行的软件应用,功能强大,体验 ... [详细]
  • wx-miniprogram-boilerplate基于Gulp构建的微信小顺序开辟工作流实用场景现在开辟微信小顺序时,可选的手艺计划大概有四种,分别是:微信小顺序原生开辟运用we ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 如何在微信文章中插入附件文档:详细教程与技巧分享
    对于众多企业和教育机构的微信公众号而言,在发布信息时常常需要在文章中嵌入各类文档附件,例如应聘申请表、健康声明书、数据记录表、疫情防控登记表、项目申报评分表及各类公告通知等。本文将详细介绍如何在微信文章中高效地插入不同类型的文档附件,并分享一些实用技巧,帮助用户提升内容发布的专业性和便捷性。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 【Python爬虫实操】 不创作小说,专精网站内容迁移,超高效!(含源代码)
    本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 【小程序】分页加载数据,下拉加载更多,上拉刷新分页加载的优点就不多说了,下面主要记录一下几个问题点。scroll-view组件不能用在 ... [详细]
author-avatar
壞小籽z_339
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有