返回

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺!
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

微信小程序顶部自定义如何实现,小程序自定义顶部导航栏的开发

2020-09-27 作者:秩名

对于小程序顶部及头部的自定义,也就是小程序页面的导航栏自定义,我们要如何做呢,下面为大家解答。

 

那么如何自定义头部呢? 通过在app.js中设置navigationStyle属性,默认值为‘default’,自定义为‘custom’。

默认头部样式展示如下:

微信小程序顶部自定义如何实现,小程序自定义顶部导航栏的开发

自定义头部样式展示如下:

可以看到自定义头部样式时,头部只保留胶囊,其他部分可以自己实现。

视频层级问题:

场景:页面中存在video标签,同时会存在弹框,并且页面底部有fixed在底部的按钮,这两部分不允许video覆盖。

解决方案:官方给出的覆盖video组件的方式是,通过cover-view,但由于cover-view对样式的支持不足及自身的问题(见上文),因此我们不使用cover-view处理。处理方式是使用图片和video交替展示的方式,初始化展示为一张图片,当点击播放时切换video组件进行展示。页面滚动,以及弹框出现的时候,将视频组件隐藏,注意是隐藏,通过hidden属性隐藏,而不是wx:if直接干掉,因为视频播放中途暂停,下次播放需要从上次结束的位置开始播放,如果使用wx:if则无疑增加了实现的难度。

总结:

本文从框架、api、组件、应用四个方面入手,说明在开发过程中遇到的问题,问题分析相对浅显,但是比较实用。希望可以对读者提供些许帮助。同时面对小程序时的心态已由最初的“纯粹的api编程”到心怀敬畏之情。看似简单的表象下,会存在这一系列棘手的情况。在此处做下总结,欢迎各位拍砖指正!

推荐文章

小程序开店 社区团购 门店开店 免费注册