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

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>
相关推荐
老华带你飞5 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗6 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张12 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师13 小时前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪14 小时前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图20916 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa18 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074719 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview
fakaifa20 小时前
CRMEB多门店 v3.3源码 无授权限制+PC端+uniapp前端
小程序·uni-app·商城小程序·技术教程·源码下载·crmeb多门店
低代码布道师20 小时前
少儿舞蹈小程序(13)作品播放量累加及点赞
低代码·小程序