app.js
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
this.calculateNavigationBar()
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
calculateNavigationBar() {
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight,
topHeight = menuButtonObject.top, //胶囊按钮与顶部的距离
dotHeight = menuButtonObject.height,
navHeight = topHeight + dotHeight,
// navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2, //导航高度
safeBottomHeight = res.screenHeight - res.safeArea.bottom
this.globalData.customTopHeiht = {
navHeight: navHeight,
topHeight: topHeight,
dotHeight: dotHeight,
statusBarHeight: statusBarHeight,
safeBottomHeight: safeBottomHeight,
}
},
fail(err) {
console.log(err)
}
})
},
globalData: {
userInfo: null,
customTopHeiht: {},
}
})
实现片段
wxml
<view class="topbg {
{ isFixedTop ? 'topbg1' : '' }}" style="height: {
{ customTopHeiht.navHeight + 12 }}px;">
<view class="toptitle {
{ isFixedTop ? 'toptitle1' : '' }}" style="top: {
{ customTopHeiht.topHeight }}px;line-height:{
{customTopHeiht.dotHeight}}px;height: {
{customTopHeiht.dotHeight}}px;">
<block wx:if="{
{ isFixedTop }}">
<input placeholder="请输入关键字"/>
</block>
<block wx:else>测试上滑</block>
</view>
</view>
<view class="box" style="margin-top: {
{ customTopHeiht.navHeight + 12 }}px;">
<view class="single" wx:for="{
{ num }}" wx:key="index">{
{ index }}</view>
</view>
js
const app = getApp()
Page({
data: {
num: 20,
isFixedTop: false
},
onLoad() {
this.setData({ customTopHeiht: app.globalData.customTopHeiht })
},
onPageScroll: function (e) {
if (this.data.timer) {
clearTimeout(this.data.timer)
}
this.data.timer = setTimeout(() => {
let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
if (scrollTop > 300) {
setTimeout(() => {
this.setData({
isFixedTop: true
})
}, 200)
} else {
this.setData({
isFixedTop: false
})
}
clearTimeout(this.data.timer)
}, 500)
}
})
wxss
.box {
padding: 30rpx;
box-sizing: border-box;
}
.single {
height: 300rpx;
line-height: 300rpx;
margin-bottom: 30rpx;
box-shadow: 0rpx 0rpx 2rpx 2rpx #eee;
}
.single:last-child {
margin-bottom: 0rpx;
}
.topbg {
width: 100%;
position: fixed;
top: 0rpx;
left: 0rpx;
z-index: 100000;
background: linear-gradient(180deg, #EEB992 0%, #EEB992 100%, transparent 100%);
}
.topbg1 {
background: linear-gradient(180deg, #F8EFEA 0%, #FCF8F5 100%, transparent 100%);
}
.topbg .toptitle {
width: 100%;
color: #000000;
font-size: 34rpx;
font-weight: bold;
height: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1000;
}
.topbg .toptitle1 {
padding-left: 30rpx;
justify-content: flex-start;
}
.topbg input {
width: 60%;
line-height: 48rpx;
height: 48rpx;
display: block;
font-size: 24rpx;
padding-left: 30rpx;
border-radius: 24rpx;
border: 2rpx solid rgb(184, 181, 181);
}
json
{
"usingComponents": {},
"navigationStyle":"custom"
}