小程序?qū)Ш綑诒尘巴该?/h2>

快速實(shí)現(xiàn)導(dǎo)航欄透明

依托于WeUI-navigation-bar組件快速時(shí)間導(dǎo)航欄透明，效果如下

截屏2020-08-19 上午9.20.28.png

話不多說直接上代碼:

1.page.json 更改默認(rèn)導(dǎo)航欄風(fēng)格引入WeUI組件

{
  "usingComponents": {
    "nav-bar": "../../../../miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom"
}

2.page.wxml引入組件

//組件導(dǎo)航欄
<nav-bar background="transparent" title="活動(dòng)" extClass="nav-bar__custom"></nav-bar>
//wxcss 樣式
.nav-bar__custom {
    background: transparent;
}
//page界面布局占位控件
<view class="weui-navigation-bar__placeholder {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;visibility: hidden;"></view>
//page 獲取 statusBarHeight
   _getSystemSetting: function() {
        wx.getSystemInfo({
            success: res => {
              const ios = !!(res.system.toLowerCase().search('ios') + 1);
              this.setData({
                ios,
                statusBarHeight: res.statusBarHeight,
              });
            }
          });
    }

3.拓展

根據(jù)子控件的scroll-view 的監(jiān)聽偏移量可以控制導(dǎo)航欄的透明程度

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。