uniapp uview navbar 左上角自定义图标

uniapp yekong

uniapp 微信小程序开发时,头部要自定义,左上角我们需要添加两个按钮,一个返回一个进入首页。我们使用的是uview的navbar组件。

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;
	}
喜欢