《网易云音乐小程序》开发总结

最新推荐文章于 2023-05-25 23:30:14 发布

~小猿

最新推荐文章于 2023-05-25 23:30:14 发布

阅读量4.3k

点赞数 1

分类专栏：网易云小程序项目文章标签：前端 uni-app 小程序 css

本文链接：https://blog.youkuaiyun.com/qq_48113035/article/details/123664921

版权

本文总结了《网易云音乐小程序》的开发过程，包括自定义导航栏的设置，解决因手机顶部窗体沉浸式导致的状态栏覆盖问题，通过CSS变量`--status-bar-height`来适配不同设备。此外，还介绍了如何设置背景图片，利用全局样式处理服务器返回的图片数据。同时，讲解了scroll-view的配置以及文本超出显示省略号的方法，最后提供了源码仓库链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、头部自定义导航栏

将配置文件pages.json中，每个页面的style->navigationStyle设置为custom即可开启自定义导航栏。

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
				// 使用自定义顶部状态栏
				"navigationStyle":"custom"
			}
		}
    ]
}

开启自定义导航栏会出现一些问题，因为手机顶部窗体是沉浸式的原因，手机顶部状态栏区域会被页面内容覆盖。