小程序头部菜单自定义 头部左边小房子跳转实现
作者：广州小程序开发 时间:2019-03-22 23:56
最近在开发个小程序，需要实现小程序头部左边小房子按钮 点击返回到首页。查了下小程序开发文档，最终实现了想要的效果。效果如下图：
这里记录下实现小程序顶部导航自定义的方法
在app.json Launch方法里加入如下代码
然后在Launch方法外部加入全局statusBarHeight: 0,方便调用
第二步新建个navbar文件夹 下面新建4个文件分别是navbar.wxml navbar.wxss navbar.js navbar.json
navbar.wxml文件代码如下
这里记录下实现小程序顶部导航自定义的方法
在app.json Launch方法里加入如下代码
wx.getSystemInfo({
success: res => {
this.statusBarHeight = res.statusBarHeight
}
});
第二步新建个navbar文件夹 下面新建4个文件分别是navbar.wxml navbar.wxss navbar.js navbar.json
navbar.wxml文件代码如下
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='capsule' wx:if="{{ back || home }}">
<view bindtap='back' wx:if="{{back}}">
<image src='img/back.svg'></image>
</view>
<view bindtap='backHome' wx:if="{{home}}">
<image src='img/home.svg'></image>
</view>
</view>
<view class='title'>{{text}}</view>
</view>
</view>
navbar.wxss文件代码如下
navbar.js文件代码如下
navbar.json文件代码如下
navbar.wxss文件代码如下
.navbar {
width: 100vw;
background-color: #fff;
position: fixed;
z-index: 4;
}
.title-container {
height: 44px;
display: flex;
align-items: center;
position: relative;
}
.capsule {
margin-left: 10px;
height: 30px;
border: 1rpx solid #eee;
border-radius: 16px;
display: flex;
align-items: center;
}
.capsule > view {
width: 30px;
height: 60%;
position: relative;
}
.capsule > view:nth-child(2) {
width: 36px;
border-left: 1px solid #777;
}
.capsule image {
width: 60%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title {
color: #333333;
position: absolute;
left: 104px;
right: 104px;
font-size: 28rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
const app = getApp()
Component({
properties: {
text: {
type: String,
value: 'Wechat'
},
back: {
type: Boolean,
value: false
},
home: {
type: Boolean,
value: false
}
},
data: {
statusBarHeight: app.statusBarHeight + 'px',
navigationBarHeight: (app.statusBarHeight + 44) + 'px'
},
methods: {
backHome: function () {
wx.reLaunch({
url: '../index/index',
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})
{
"component": true
}
然后在需要使用的的方引入 如我在单个页面实现自定义头部的房子
单个页面路径 pages/groupstatus/groupstatus
在 js文件里头部加入
然后在需要使用的的方引入 如我在单个页面实现自定义头部的房子
单个页面路径 pages/groupstatus/groupstatus
在 js文件里头部加入
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px';
在data里加入
navigationBarTitle: '拼团详情',
在data里加入
navigationBarTitle: '拼团详情',
navigationBarHeight,
在wxml文件里加入
在wxml文件里加入
<navbar back home text="{{navigationBarTitle}}"></navbar> 引入navbar的第一个view 加入
style="{{'top:' + navigationBarHeight}}" 如 <view class='reward' style="{{'top:' + navigationBarHeight}}">
最后在json里加入 "navigationStyle": "custom", 这个如果放到app.json里作用是全局的。这个自定义头部左边的小房子就可以实现了
style="{{'top:' + navigationBarHeight}}" 如 <view class='reward' style="{{'top:' + navigationBarHeight}}">
最后在json里加入 "navigationStyle": "custom", 这个如果放到app.json里作用是全局的。这个自定义头部左边的小房子就可以实现了
上一篇：虚拟物品小程序审核不通过的解决办法
下一篇：没有了
在线咨询