当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序自定义顶部导航栏的开发

小程序自定义顶部导航栏的开发

2018-09-18 11:51 来源: 霸界科技

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

期权保本理财
  对于小程序顶部及头部的自定义,也就是小程序页面的导航栏自定义,我们要如何做呢,下面为大家解答。
 
小程序自定义顶部导航栏的开发
 
  那么如何自定义头部呢? 通过在app.js中设置navigationStyle属性,默认值为‘default’,自定义为‘custom’。
 
  默认头部样式展示如下:
 
  自定义头部样式展示如下:
 
  可以看到自定义头部样式时,头部只保留胶囊,其他部分可以自己实现。
 
  视频层级问题:
 
  场景:页面中存在video标签,同时会存在弹框,并且页面底部有fixed在底部的按钮,这两部分不允许video覆盖。
 
  解决方案:官方给出的覆盖video组件的方式是,通过cover-view,但由于cover-view对样式的支持不足及自身的问题(见上文),因此我们不使用cover-view处理。处理方式是使用图片和video交替展示的方式,初始化展示为一张图片,当点击播放时切换video组件进行展示。页面滚动,以及弹框出现的时候,将视频组件隐藏,注意是隐藏,通过hidden属性隐藏,而不是wx:if直接干掉,因为视频播放中途暂停,下次播放需要从上次结束的位置开始播放,如果使用wx:if则无疑增加了实现的难度。
 
  总结:
 
  本文从框架、api、组件、应用四个方面入手,说明在开发过程中遇到的问题,问题分析相对浅显,但是比较实用。希望可以对读者提供些许帮助。同时面对小程序时的心态已由最初的“纯粹的api编程”到心怀敬畏之情。看似简单的表象下,会存在这一系列棘手的情况。在此处做下总结,欢迎各位拍砖指正!
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088