有接口可以实现
1、首先在要自定义的页面中的pageName.json中加上,"navigationStyle": "custom" 隐藏微信小程序原生导航栏。
2、调用微信api获取手机系统屏幕高度和导航栏高度
getTopHeight:function(){
//获取胶囊位置信息
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
//定义导航位置参数
var globalData={
navHeight:0,
navTop:0,
windowHeight:0,
ww:0,
hh:0,
}
var navTop;
var navHeight;
//获取手机系统信息
wx.getSystemInfo({
success: res => {
//导航高度
var statusBarHeight = res.statusBarHeight;
navTop = menuButtonObject.top;
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
globalData.navHeight = navHeight;
globalData.navTop = navTop;
globalData.windowHeight = res.windowHeight;
//可视窗口宽度
var ww = res.windowWidth;
//可视窗口高度
var hh = res.windowHeight;
globalData.ww = ww;
globalData.hh = hh;
console.log(globalData)
//这是我自定义的返回图标位置高度 21单位是 rpx,是图标高度的一半,图标高度为48rpx
var backHeight=(navTop*2+(navHeight-navTop))-21;
that.setData({
globalData:globalData,
backHeight:backHeight
})
},
fail(err) {
console.log(err);
}
})
}
3、这里是wxml中的内容
<view class="bg-img">
<image src="img/bgImg.png" class='img'></image>
</view>
<image src="img/back.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
<!-- 自定义导航 高度单位 rpx ,这里+4 是因为样式美观,你喜欢加多少都行,hidden这个参数在下面的方法中获取-->
<view class="top-view" style="height:{{(globalData.navHeight*2)+4}}rpx" hidden="{{hidden}}">
<image src="img/back-black.png" class="backimg" bindtap="backPage" style="top:{{backHeight}}rpx;"></image>
</view>
4、监听页面滑动高度
/**
* 监听页面滑动事件
* @param {} e
*/
onPageScroll:function(e){
//e.srolltop 是页面滑动的实时高度
console.log(e.scrollTop)
var that=this;
//这里390是我顶部导航栏背景图片的高度 height 则是计算出来背景图片隐藏的高度
var height=(390-(that.data.globalData.navHeight*2)+4)/2;
console.log(height)
if(parseInt(e.scrollTop)>height){
that.setData({
hidden:false
})
}else{
that.setData({
hidden:true
})
}
},
网友回复
python如何调用openai的api实现知识讲解类动画讲解视频的合成?
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报?
f12前端调试如何找出按钮点击事件触发的那段代码进行调试?
abcjs如何将曲谱播放后导出mid和wav格式音频下载?
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式?
js在HTML中如何将曲谱生成音乐在线播放并下载本地?
python如何实现在windows上通过键盘来模拟鼠标操作?
python如何给win10电脑增加文件或文件夹右键自定义菜单?
python如何将音乐mp3文件解析获取曲调数据?