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>