zoukankan      html  css  js  c++  java
  • 小程序自定义导航栏_navigationStyle

    参考:https://www.cnblogs.com/wangzirui98/archive/2019/07/26/11249317.html

    参考:https://www.mk2048.com/blog/blog.php?id=c1cakc0cbckj&title=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AF%BC%E8%88%AA%E6%A0%8F_navigationStyle

    小程序自定义导航栏

    • 微信提供自定义导航栏说明
    • 开始自定义导航栏组件

    微信提供自定义导航栏说明

    • 微信版本 6.60
    • window下的 navigationStyle 属性,设置为 custom 即可关闭原生头部导航,但会保留椭圆形菜单。
    • Tip 暂时不支持单页面设置 navigationStyle 属性

    开始自定义导航栏

    了解规则

    iPhone X : 导航栏高度 44 、 状态栏高度 44 、tabBar高度 83

      

    其他机型 : 导航栏高度 44 、 状态栏高度 20 、 tabBar高度 49
    

      

    自定义组件

    • app.wxss 添加page属性

     1 page {
     2   position: absolute;
     3   top: 0;
     4   bottom: 0;
     5   height: 100%;
     6   background-color: #f8f8f8;
     7   font-size: 32rpx;
     8   color: #333;
     9   display: flex;
    10   flex-direction: column;
    11 }

    页面使用2层流式布局  

    1 <view >
    2     <view class='navigation'></view>
    3     <view class='container'></view>
    4 </view>

    container使用布局 flex:1这个一定要加上

    .container{
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    navigation组件
    1.js

     1 setNavigation(){  
     2     let startBarHeight = 20
     3     let navgationHeight = 44
     4     let that = this
     5     wx.getSystemInfo({
     6       success: function (res) {
     7         console.log(res.model)
     8         if (res.model == 'iPhone X'){
     9           startBarHeight = 44
    10         }
    11         that.setData({
    12           startBarHeight: startBarHeight,
    13           navgationHeight: navgationHeight
    14         })
    15       }
    16     })
    17   },

    2.wxml

    1     <view class='navigation'>
    2       <view class='startBar' style='height:{{startBarHeight}}px'></view>
    3       <view class='navgation' style='height:{{navgationHeight}}px'></view>
    4     </view>

    最后封装成组件即可

    写在最后

    感觉这个玩意还是官方给的香,如果现在项目用起来就自己封装一个用吧。
    期待出单页面设置navigationStyle

  • 相关阅读:
    27.全排列与带重复的排列
    ios之自定义UISwitch
    ios之UIAlertView
    ios之UISegmentedcontol
    ios之UISlider
    ios之UITextfield
    ios之UIImageView
    ios之UIButoon
    ios之UILabel
    ios 点餐系统
  • 原文地址:https://www.cnblogs.com/PasserByOne/p/12097734.html
Copyright © 2011-2022 走看看