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

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>
相关推荐
qq229511650231 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦8 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac10 小时前
微信小程序的组件
微信小程序
stormjun12 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong14 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
18 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
21 小时前
微信小程序运营日记(第四天)
微信小程序·小程序