我都知道想要隐藏默认的导航在 app.json 里面把 "navigationStyle" 设置为 "custom"即可,但是要自定义上面的返回以及首页按钮就需要对各个手机的兼容做处理。

正好我做了一个“设计屋子”的小程序就要用到这个功能,而且我用到的地方不多只需要文章和分类列表,因为其他位置有下面的导航,也就是我只需要2个页面来做就可以了,所有我就没有单独写成组件来引用毕竟能节约就节约。

下面我来说一下我是如何实现的

具体步骤:

第一:在 app.json 的"window":里面添加"navigationStyle": "custom",隐藏自带的导航。

第二:在app.js的下添加:

onLaunch: function () {
wx.getSystemInfo({
success: res => {
//导航高度
this.globalData.navHeight = res.statusBarHeight + 46;
this.navH = res.statusBarHeight;
this.platform = res.platform;
}
})
},
获取高度
第三:在需要的页面引入高度:例如我在文章页面引入那就在detail.js中添加:
var App = getApp();//引入app.js
data: {
navH: App.globalData.navHeight
},
第四:在detail.js中继续添加返回
back: function () {
wx.navigateBack({
delta: 1
})
},
如果需要首页就在添加:
goHome: function () {
wx.switchTab({
url: '../index/index'
})
},
第五:添加wxml
<viewclass="top-back"catchtap="back"style='margin-top: {{navH -35}}px'>
<imagesrc="../../images/back.png"></image>
</view>
样式可以自己写下面附上我的
.top-back{
position:fixed;
top:9;
left:30rpx;
width:60rpx;
height:60rpx;
background:#444444;
z-index:9999;
border-radius:30rpx;opacity:0.5;
}
.top-back image{
width:30rpx;
height:30rpx;
padding:15rpx13rpx;opacity:1;
}
这就是我写的  希望你们能用到

声明:浩孜网络|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 解决微信小程序自定义导航各手机型号不对齐的问题

查看评论

Comments | NOTHING

暂无评论
Welcome back , [ 修改 ]