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

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/[email protected]"  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>
相关推荐
老李不敲代码11 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa11 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J13 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896314 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技1 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰1 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序
换日线°2 天前
微信小程序拖拽排序有效果图
微信小程序