小程序自定义标题和胶囊横对齐

2021-10-20 10:58:49 阅读：267 来源： 互联网

标签：toBarHeight 自定义胶囊 statusBarHeight globalData 对齐 app px 44

app.js

App({
  onLaunch: function () {
    let _that=this;
    // 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        //导航高度
        // this.globalData.navHeight = res.statusBarHeight + 44;
        _that.globalData.statusBarHeight=res.statusBarHeight;
      }, fail(err) {
        console.log(err);
      }
    });
  }
      });
    })
  },
  globalData: {
    statusBarHeight: 0,
    toBar: 44
  }
})

文件夹下的文件
js

  data: {
    statusBarHeight: 20,
    toBarHeight: 44
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight,
      toBarHeight: app.globalData.toBar
    })
  },

wxml

<view class="header">
  <view class="title" style="top: {{statusBarHeight}}px;height: {{toBarHeight}}px;line-height: {{toBarHeight}}px;">派单</view>
	<image src="{{imgUrl}}/tms/homePage-bg.png" class="user_img" />
</view>

wxss

.header {
  position: relative;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
}

.header .title {
  position: absolute;
  /* margin-top: 64rpx; */
  left: 50%;
  /* top: 20px; */
  transform: translate(-50%,0);
  color: white;
  font-size: 32rpx;
}

效果：
在这里插入图片描述

标签：toBarHeight,自定义,胶囊,statusBarHeight,globalData,对齐,app,px,44
来源： https://blog.csdn.net/jack_rose_me/article/details/120861746

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小程序自定义标题和胶囊横对齐