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

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 分钟前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
00后程序员张5 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Goona_15 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
笨笨狗吞噬者15 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
性能优化·微信小程序·uni-app
知识分享小能手17 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小517 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人19 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟20 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄21 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐21 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序