在此记录一个简单的返回导航样式,适用于nvue文件

<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="20" color="#fff" @click="goto_top"></u-icon>
				<!-- <u-icon name="plus-circle" color="#fff" width="20" height="20"></u-icon> -->
			</view>
			<view class="u-nav-slot" slot="right">
				<image src="@/static/image/icon-cosmetics-search.png" style="width: 20px;height: 20px;"></image>
			</view>
		</u-navbar>


.u-nav-slot {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

底部导航

<view class="app-tabbar">
			<view v-for="(item, i) in tabbar" :key="i" @tap.stop="click(item)">
				<text :class="['tabbar', { 'selected' : i === index }]">{{ item.text }}</text>
			</view>
		</view>
tabbar: [{
						pagePath: '/pages/app/index/index',
						// "iconPath": "static/tabar/message.png",
						// "selectedIconPath": "static/tabar/message-active.png",
						text: '朴信'
					},
					{
						pagePath: '/pages/app/record/record',
						// "iconPath": "static/tabar/record.png",
						// "selectedIconPath": "./static/tabar/record-active.png",
						text: '通话'
					},
					{
						pagePath: '/pages/app/tianWen/tianWen',
						// "iconPath": "static/tabar/record.png",
						// "selectedIconPath": "./static/tabar/record-active.png",
						text: '天问'
					},
					{
						pagePath: '/pages/app/find/find',
						// "iconPath": "/static/tabar/find.png",
						// "selectedIconPath": "./static/tabar/find-active.png",
						text: '个人'
					},
					{
						pagePath: '/pages/app/mine/mine',
						// "iconPath": "./static/tabar/person.png",
						// "selectedIconPath": "./static/tabar/person-active.png",
						text: '朴文'
					}
				]
click(e) {
				uni.redirectTo({
					url: e.pagePath
				})
			}
.app-tabbar {
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 50rpx;
		justify-content: space-between;
		z-index: 9999;
	}

	.tabbar {
		color: #636263;
		font-size: 24rpx;
	}

	.selected {
		color: #1dc6d9;
	}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值