广州小程序开发

小程序头部菜单自定义 头部左边小房子跳转实现

作者:广州小程序开发 时间:2019-03-22 23:56
最近在开发个小程序,需要实现小程序头部左边小房子按钮 点击返回到首页。查了下小程序开发文档,最终实现了想要的效果。效果如下图:



这里记录下实现小程序顶部导航自定义的方法

在app.json Launch方法里加入如下代码

wx.getSystemInfo({
success: res => {
this.statusBarHeight = res.statusBarHeight
}
});
然后在Launch方法外部加入全局statusBarHeight: 0,方便调用

第二步新建个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 {
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;
}
navbar.js文件代码如下
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
})
}
}
})
 
navbar.json文件代码如下
{
"component": true
}
然后在需要使用的的方引入 如我在单个页面实现自定义头部的房子
单个页面路径 pages/groupstatus/groupstatus

在 js文件里头部加入
const navigationBarHeight = (getApp().statusBarHeight + 44) + 'px';
在data里加入
navigationBarTitle: '拼团详情',
navigationBarHeight,
在wxml文件里加入
<navbar back home text="{{navigationBarTitle}}"></navbar> 引入navbar的第一个view 加入
style="{{'top:' + navigationBarHeight}}" 如 <view class='reward' style="{{'top:' + navigationBarHeight}}">
最后在json里加入
"navigationStyle": "custom", 这个如果放到app.json里作用是全局的。这个自定义头部左边的小房子就可以实现了


上一篇:虚拟物品小程序审核不通过的解决办法
下一篇:没有了

您的疑惑,我们来解答

多年来我们为上百家企业提供了网站建设服务

感受专业服务,从来电咨询开始
广州:18814374480深圳:13480275394
在线咨询