怎么在小程序中自定义单页面


这篇文章主要介绍“怎么在小程序中自定义单页面”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么在小程序中自定义单页面”文章能帮助大家解决问题。一、实现的前提1、首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。2、在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 “navigationBarTextStyle”:”white/black”3、还要考虑加返回按钮和返回首页的按钮,适配不同的机型先说下两种配置方法:①全局配置navigationStyle:调试基础库>=1.9.0微信客户端>=6.6.0app.json②单页面配置navigationStyle调试基础库>=2.4.3微信客户端版本>=7.0.0自定义的页面.json二、实现的步骤以下说下几个要点:1、自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度2、statusBarHeight,用来获取手机状态栏的高度,这个需要在全局app.js中的onLaunch,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度,3、还有注意的, 香港云主机在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。4、因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。如下是封装的导航栏组件:wxmlwxssjsjson首先可以在app.js里面获取下当前用户的微信版本,做下版本比较,如果小于这个版本,设置个全局变量,也可以在组件写个方法,在不同的页面打开显示不同的顶部导航栏,或者可以控制是否显示导航栏,这里就不详细说了。亲自试了下,在低于7.0版本的微信中,如果采用单页面自定义导航栏,会出现两个导航栏,这时候通过判断版本号不要再渲染自定义的导航栏组件了,在页面的配置文件里写上title名,还有相应的背景色,这样就会显示自带的导航栏了。关于“怎么在小程序中自定义单页面”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注开发云行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: 笔记本电脑关机后耗电严重怎么办

这篇文章主要介绍了笔记本电脑关机后耗电严重怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。笔记本关机后电池电量损耗较大,可能是下面两个原因造成的:1、笔记本电脑开启了网路唤醒(Wake On…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/15 11:24
下一篇 07/15 11:24

相关推荐