服务网站策划书,重庆网络学院官网,wordpress保存图片插件,在阿里国际站做的网站无论是在什么手机机型下#xff0c;自定义的导航都和右侧的胶囊水平一条线上。如图下 以上图iphone12#xff0c;13PRo 以上图是没有带黑色扇帘的机型 以下是调试器看的wxml的代码展示 注意#xff1a;红色阔里的是自定义导航#xff08;或者其他的logo啊#xff0c;返回之… 无论是在什么手机机型下自定义的导航都和右侧的胶囊水平一条线上。如图下 以上图iphone1213PRo 以上图是没有带黑色扇帘的机型 以下是调试器看的wxml的代码展示 注意红色阔里的是自定义导航或者其他的logo啊返回之类的都可以蓝色阔就是页面的内容模块 以下就上真正的代码 wxml
view classpageview classtop-nav-boxview classheaderTitle styleheight:{{menuHeigth}}px;line-height: {{menuHeigth}}px; padding: {{menuTop-4}}px 0 0 0; z-index: 999; position: fixed;top:0;view classitem历届投稿作品/view/view/viewview classcontent-box stylepadding-top: {{menuHeigthmenuTop}}px;页面内容/view/view
wxss
.headerTitle {color: #FF5733;font-size: 32rpx;width: 100%;overflow: hidden;background-color: #ffffff;padding-left: 30rpx !important;
}
注意这里其实也就是意思一下谢谢自定义导航的样式咱们的注重点在于距离手机屏幕上方的距离
js
Page({data: {menuTop:0,menuHeigth:0,},async onLoad() {let menu wx.getMenuButtonBoundingClientRect() // --胶囊信息this.setData({menuTop:menu.top,menuHeigth:menu.height,})},
注意胶囊信息里面 有好多值有需求可以使用 注意蓝色阔就是不胶囊里面的值就是以它为参照物的对应值
