小程序自定义头部

最新推荐文章于 2024-05-15 11:02:25 发布

Shaw Jie�

最新推荐文章于 2024-05-15 11:02:25 发布

阅读量547

点赞数

文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/Shaw_Jie/article/details/128347379

版权

WXML

<!--components/Header/Header.wxml-->
<view class="header-box" style="height:{{oHeight*2+20}}px;">
    <view class="flex" style="height: {{oHeight*2+44}}px;">
        <image src="{{src}}" mode="" class="back_img"/>
        <view class="title">标题</view>
    </view>
</view>
<image src="/images/hm_bg.png" class="bg_img" mode=""/>

WXSS

/* components/Header/Header.wxss */
.header-box{
    position: fixed;
    width: 100%;
    top: 0;
}
.flex{
    display: flex;
    align-items: center;
}
.back_img{
    width: 32rpx;
    height: 36rpx;
    padding: 10rpx;
}
.title{
    position: absolute;
    min-width: 400rpx;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
}
.bg_img{
    /* width: 750rpx; */
    /* height: 450rpx; */
    width: 100%;
}

// app.js
App({
  onLaunch() {
    let that = this;
    wx.getSystemInfo({
        success:(res=>{
            that.globalData.Height = res.statusBarHeight // 把他给oHeight
        })
    })
  },