uniapp 微信小程序开发时,头部要自定义,左上角我们需要添加两个按钮,一个返回一个进入首页。我们使用的是uview的navbar组件。
代码实例
<u-navbar :placeholder="true" left-icon-color="rgba(255, 255, 255, 1)" :safeAreaInsetTop="true" title=" "
bgColor="rgba(0,0,0,0)">
<view class="u-nav-slot" slot="left">
<u-icon name="arrow-left" color="#fff" size="19" @click="goback"></u-icon>
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
<u-icon name="home" size="20" color="#fff" @click="goHome"></u-icon>
</view>
<view slot="center">
<text class="title" style="color: rgba(255, 255, 255, 1);">成员管理</text>
</view>
</u-navbar>
方法
goback() {
uni.navigateBack()
},
goHome() {
uni.redirectTo({
url: '/pages/home/home'
})
},
样式
.u-nav-slot {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}