微信小程序自定义导航教程(兼容各种手机)
作者:面包大虾 发布时间:2024-04-30 09:53:12
前言
本文主要给大家介绍了关于微信小程序自定义导航的相关内容,详细代码请见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=black
和backgroundColor=#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”,"票圈长视频",我们公司的小程序也在计划用
来源:https://www.cnblogs.com/mianbaodaxia/p/10103933.html
猜你喜欢
- 目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果。对于前端开发工程师来说,圆角的确是一个让人又爱又恨的
- 本文实例讲述了Python面向对象之类的内置attr属性。分享给大家供大家参考,具体如下:这个比较简单。代码示例:# -*- coding:
- Django中提供了一个关于URL的映射的解决方案,1.客户端的浏览器发起一个url请求,Django根据URL解析,把url中的参数捕获,
- 本文实例讲述了Python多线程通信queue队列用法。分享给大家供大家参考,具体如下:queue:什么是队列:是一种特殊的结构,类似于列表
- 前言最近看到一个有意思的机器学习项目——GFPGAN,他可以将模糊的人脸照片恢复清晰。开源项目的Github地址:https://githu
- 本文实例分析了JS重载实现方法。分享给大家供大家参考,具体如下:重载是面向对象语言里很重要的一个特性,JS中没有真正的重载,是模拟出来的(因
- 一、时间对象timetime模块使用的是C语言函数库中的函数。只能处理1970/1/1到2038/12/31之间的数据。1.测量运行时间方法
- 引言context包比较小,是阅读源码比较理想的一个入手,并且里面也涵盖了许多go设计理念可以学习。go的Context作为go并发方式的一
- 在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态
- 当使用Tensorflow训练大量深层的神经网络时,我们希望去跟踪神经网络的整个训练过程中的信息,比如迭代的过程中每一层参数是如何变化与分布
- 本文实例讲述了python分支、循环简单用法。分享给大家供大家参考,具体如下:讲程序设计,不得不讲到顺序、分支、循环。顺序就是从上到下运行代
- vue3 项目封装侧导航文字骨架效果组件-全局封装,供大家参考,具体内容如下目的当显示页面的时候,有些数据是需要从后台加载,网络不好的时候可
- 涉及到详情页爬取目录结构:kaoshi_bqg.pyimport scrapyfrom scrapy.spiders import Rule
- swagger介绍Swagger本质上是一种用于描述使用JSON表示的RESTful API的接口描述语言。Swagger与一组开源软件工具
- 介绍在使用matplotlib的过程中,发现不能像matlab一样同时开几个窗口进行比较,于是查询得知了交互模式,但是放在脚本里运行的适合却
- (需要安装psutil 用来获取服务器资源,以及pymongo驱动)#pip install psutil#pip install pymo
- 如下的实际例子代码可以将查询的结果放入到一张自定义表中,同时可以再从这个自定义的表中查询数据:with AA as(SELECT TICKE
- 在安装pip前,请确认win系统中已经安装好了python,和easy_install工具,如果系统安装成功,easy_install在目录
- 一个更易读的网站意味着网站使用性的改良以及提供愉悦的阅读体验。我们希望浏览者们能或者这些好处不是吗?这篇文章我们将介绍5个简单的方法让你能提
- js格式化金额,可选是否带千分位,可选保留精度,也是网上搜到的,但是使用没问题 /* 将数值四舍五入后格式化. @param num 数值(