欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

支付寶小程序自定義頭部組件 - 新聞資訊 - 云南小程序開(kāi)發(fā)|云南軟件開(kāi)發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開(kāi)發(fā)/軟件開(kāi)發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X(jué)表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

支付寶小程序自定義頭部組件

發(fā)表時(shí)間：2020-9-21

發(fā)布人：葵宇科技

瀏覽次數(shù)：123

支付寶小程序自定義頭部組件

view

<view class="nav-header" style="height:{{navbarData.isFloat?0:statusBarHeight+titleBarHeight}}px">
  <view class="nav-top">
    <image a:if="{{navbarData.isBgImg}}" src="/images/user-bg.png" class="headder-bg" style="width:100%;height:{{statusBarHeight+titleBarHeight}}px;"></image>
    <view class="nav-status-bar" style="height:{{statusBarHeight}}px"></view>
    <view class="nav-title-bar" style="height:{{titleBarHeight}}px">
      <view class="nav-left">
        <slot name="header-left"></slot>
      </view>
      <view class="nav-title-text" style="line-height:{{titleBarHeight}}px;">
        <text>{{navbarData.title}}</text>
      </view>
    </view>
  </view>
</view>

const app = getApp()
Component({
  props: {
    navbarData: {}
  },
  data: {
    statusBarHeight: '',
    titleBarHeight: ''
  },
  didMount: function () {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      titleBarHeight: app.globalData.titleBarHeight
    })
  },
  methods: {

  }

})

css


.nav-header{
  width: 100%;
}
.nav-top{
  width: 100%;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  background: transparent;
}
.nav-status-bar{
  width: 100%;
  background: transparent;
}
.nav-title-bar{
  width: 100%;
  position: relative;
  background: transparent;
}
.nav-title-text{
  width: 100%;
  /* font-size: 40rpx; */
  color: white;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.nav-title-text text{
  position: relative;
  top: 6rpx;
}
.nav-left{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.headder-bg{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1
}

實(shí)戰(zhàn)：

組件上使用

  <navbar navbar-data="{{nvabarData}}" />

// 引用
    nvabarData: {
      isFloat: true,
      title: '喜刷' //導(dǎo)航欄 中間的標(biāo)題
    },
    height: '',


 onLoad() {
    // 獲取用戶數(shù)據(jù)
    this.setData({
      height: app.globalData.statusBarHeight + app.globalData.titleBarHeight,
    })