微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图:
如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用顶部渐变怎么处理呢?先看看效果图:
其实,微信小程序还是开放了一些权限,让我们自定义顶部导航栏的,只需要在当前页面的json文件中配置:
"navigationStyle": "custom" //导航栏样式,仅支持以下值:default 默认样式,custom 自定义导航栏,只保留右上角胶囊按钮
微信客户端 7.0.0以上支持
如果需要还可以去掉底部菜单栏,在js文件中调用接口:
wx.hideTabBar({success: function(){console.log("成功隐藏了底部菜单栏");}
})
这样,我们就可以实现全面屏应用了。
当然,因为项目需求,你在一个tabBar页面自定义了顶部导航栏之后,也就不存在顶部的导航标题了,这与其他的tabBar页面风格就不统一了,name,如何实现和其他的tabBar页面风格统一呢?也就是导航栏标题内容排版要跟其他页面统一。
这里我有一个思路,首先,要考虑到不同手机的尺寸不一,顶部状态栏的高度就不同(iphone6是20,iphoneX是44),这样的话我们就不能简单的给做个固定的高度的view就好了,这样会出现排版错乱的。
我的方法是,动态获取手机的状态栏高度,还好微信提供了获取的api:
let systemInfo = wx.getSystemInfoSync();let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
let fontSize = systemInfo.fontSizeSetting * pxToRpxScale;// 用户设置的字体大小
let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
let titleHeight = 44 * pxToRpxScale; //导航栏高度,这个一般是固定的
这样,就得到了顶部状态栏加导航栏的高度了。
以上我只是提供思路,具体的实现方法可以去我的资源下载
微信小程序实现顶部导航栏渐变相关推荐
- 微信小程序 自定义顶部导航栏标题 navigationStyle
微信小程序 自定义顶部导航栏标题 单页面自定义导航栏 修改需要自定义的页面,的页面配置.json文件 全部页面自定义导航 修改公共页面配置app.json 单页面自定义导航栏 修改需要自定义的页面,的 ...
- 微信小程序制作顶部导航栏
1问题描述 使用微信小程序开发者工具制作顶部导航栏. 2算法描述 首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "windo ...
- 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
- 微信小程序中顶部导航栏全局切换
一.场景 微信小程序和企业微信小程序共用一个,从不同入口进入小程序显示不同的顶部导航栏 二.思路 1.app.json中全局设置只能写死一个,无法实现 2.app.js中直接使用wx.setNavig ...
- 微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
- 微信小程序开发 — 顶部导航栏
直接看代码吧,第一部分是wxml部分 <view class='nav'><text class='{{curNum==index?"cur":"&qu ...
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab ...
最新文章
- “传统”遥感遇上AI,会产生怎样的效果?
- js选择checkbox值,组织成key-value形式,传值到后台
- 为什么黑客用python-为什么如此多的黑客都用python?
- windows下获取柱面、扇区数,扇区大小
- 如何画好一张架构图?(内含知识图谱)
- nginx代理设置域名跳转/域名重定向
- Spring BPP中优雅的创建动态代理Bean
- C#创建桌面快捷方式
- 【CDN】域名无法访问,ping不到,tracert不到
- 软考网络规划设计师基础知识考察要点
- Could not clean server of obsolete files
- html5 输入用户名和密码登陆网址,192.168.5.1路由器登录入口用户名和密码
- webStrorm js文件里 怎么去掉参数的下划线
- CentOS6.8下实现配置配额
- 多Excel合并成一个Excel的多sheet
- 字节跳动怎么都十万人了?
- poweramp最完美设置_powerAMP音效设置
- 会议OA项目---我的审批(审批会议签字)
- Android之原始的QQ好友分组实现
- 安卓期末大作业——售票APP源码和设计报告