支付寶小程序 UI·透明標題欄

小程序頂部標題欄和狀態(tài)欄透明顯示?？赏ㄟ^ my.getSystemInfoSync 獲取標題欄和狀態(tài)欄的高度，從而進行自定義開發(fā)。

掃碼體驗

效果示例

前提條件

使用標題欄透明的前提條件如下：

• 已完成 開發(fā)者入駐 與 小程序創(chuàng)建 。
• 已下載并安裝 小程序開發(fā)者工具。

獲取模板代碼

下載 標題欄透明 Demo.zip 文件，并解壓至本地。

配置字段說明

示例代碼

index.json

{
  "transparentTitle": "auto",
  "allowsBounceVertical": "NO",
  "pullRefresh": false,
  "titlePenetrate": "YES",
  "defaultTitle": ""
}

index.axml

<view class="atd-config-transparent-header">
  <view class="content-top">
    <!-- 手機狀態(tài)欄,無法觸發(fā)onTap -->
   <view class="statusBar" style="height: {{systemInfo.statusBarHeight}}">我是手機狀態(tài)欄</view>
    <!-- 手機標題欄,在json中設置"titlePenetrate": "YES"即可觸發(fā)onTap -->
   <view onTap="onTitleBar" class="titleBar" style="height: {{systemInfo.titleBarHeight}}">我是手機自定義標題欄</view>
  </view>
  <view class="content-bottom">
  </view>
</view>

index.acss

.atd-config-transparent-header {
  background-color: black;
}


.atd-config-transparent-header .content-top {
  background-image: url('https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*13jpTYrECqYAAAAAAAAAAABjARQnAQ');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  width: 100vw;
  height: 746rpx;
  color: #fff;
}


.atd-config-transparent-header .content-top .statusBar {
  background-color: green;
  display: flex;
  align-items: center;
  justify-content: center
}
.atd-config-transparent-header .content-top .titleBar {
  background-color: #108ee9;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 32rpx;
}


.atd-config-transparent-header .content-bottom {
  margin-top: 1000rpx;
  background-image: url('https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*rFctR6myHjcAAAAAAAAAAABjARQnAQ');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  width: 100vw;
  height: 746rpx;
}

index.js

Page({
  data: {
    systemInfo: {} // 手機基礎信息
  },
  onLoad(options) {
    try {
      // 獲取手機基礎信息(頭狀態(tài)欄和標題欄高度)
      let systemInfo = my.getSystemInfoSync();
      this.setData({ systemInfo });
    } catch (e) {
      console.log(e);
      my.alert({
        title: '溫馨提示',
        content: 'onLoad 執(zhí)行異常'
      });
    }
  },
  /**
   * 點擊手機標題欄觸發(fā)的事件,需要在index.json配置titlePenetrate:"YES"
   * @method onTitleBar
   */
  onTitleBar(e) {
    my.alert({
      title: '溫馨提示',
      content: '您點擊了"我是手機標題欄"'
    });
  }
});