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

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编程”到心怀敬畏之情。看似简单的表象下，会存在这一系列棘手的情况。在此处做下总结，欢迎各位拍砖指正!

线上+线下+进销存+收银+会员门店零售管理好帮手

极速收银管理
门店能实现快速收银，提升门店经营效率。
进销存管理
系统自带进销存管理，更好管理库存销售。
软硬件一体化
配备收银硬件一站式整体服务。

收银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

长沙总部热线

4006-089-731

北京公司

4006-601-982

深圳公司

4008-400-198

一对一咨询

立即扫码关注

产品试用获取方案及报价

门店管理电话咨询功能演示产品试用