微信小程序自定义头部组件封装

青青子衿越2024-04-14 0:09

index.json

javascript 复制代码

{
  "component": true,
  "usingComponents": {}
}

index.scss

css 复制代码

.back{
  position: fixed;
  top: 0;
  margin-left: 24rpx;
  z-index: 100;
  // background-color: #fff;
  image{
    // width: 64rpx;
    // height: 64rpx;
    z-index: 999;
  }
}
.topTitle{
    // background-color: #f2f2f2;
    
    // z-index: 100;
    transition:0;
  width: 100%;
  position: fixed;
    top: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;

font-size: 28rpx;
font-family: SFProText-Medium, SFProText-Medium;
font-weight: 400;
color: #333;
// height: 64rpx;
margin-bottom: 30rpx;
color: #FFF;

}

index.ts

javascript 复制代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    titleText: {
      type: String,
      value: ''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    navtop: '',
    navmargin: '',
    navPicHeight: ''
  },
  ready() {
    // 1.获取屏幕可使用宽度
    let windowWidth = wx.getSystemInfoSync().windowWidth;
    // 2.获取状态栏高度
    const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
    // // 3.获取胶囊按钮位置信息
    const menuButton = wx.getMenuButtonBoundingClientRect();
    // 4.计算出导航栏高度  换算成rpx
    let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
    // // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
    let statusBarTop = statusBarHeight * (750 / windowWidth);
    this.setData({
      navtop: menuButton.top,
      navmargin: menuButton.top + menuButton.height + 10,
      navPicHeight: menuButton.height
    })


    console.log('menuButton.top88888888888888888', menuButton);
  },

  /**
   * 组件的方法列表
   */
  methods: {
    goBack() {
      console.log("0.22");

      wx.navigateBack({
        delta: 1,
        complete(e) {
          console.log('//', e);

        }
      })
    },

  },

})

index.wxml

html 复制代码

<view class="back" bindtap="goBack"  style='padding-top:{{navtop}}px;'>
  <image  src="../../static/center/back@2x.png"  style='width:{{navPicHeight}}px;height:{{navPicHeight}}px;'></image>
</view>
<view class="topTitle" style='margin-top:{{navtop}}px;height:{{navPicHeight}}px;'>
  {{titleText}}
</view>

使用

signIn.json引入

javascript 复制代码

  "usingComponents": {
    "navigationTop": "/components/navigationTop/index"
  },

signIn.wxml使用

html 复制代码

<navigationTop titleText='签到中心'></navigationTop>