Example 1
Code
<template>
<view>
<uni-nav-bar left-icon="arrowleft" title="标题" @clickLeft="back" />
<br>
<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" left-text="返回" title="标题" @clickLeft="back" @clickTitle="clickTitle" />
<br>
<uni-nav-bar left-icon="arrowleft" right-text="菜单" left-text="返回" title="标题" @clickLeft="back" @clickTitle="clickTitle" @clickRight="showMenu"/>
</view>
</template>
<script>
export default {
components: {},
data() {
return {}
},
methods: {
back() {
uni.navigateBack({
delta: 1
})
},
showMenu() {
uni.showToast({
title: '点击了菜单'
})
},
clickLeft() {
uni.showToast({
title: '左侧按钮'
})
},
clickTitle() {
uni.showToast({
title: '点击了标题'
})
}
}
}
</script>
Example 2
<template>
<view>
<uni-nav-bar color="#333333" background-color="white" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
<block slot="left">
<view class="city">
<view><text style="font-size: 14px">北京</text></view>
<uni-icons type="arrowdown" color="#333333" size="22" />
</view>
</block>
<view class="input-view">
<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666"/>
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
</view>
</uni-nav-bar>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
}
},
methods: {
showCity() {
uni.showToast({
title: '选择城市'
})
},
scan() {
uni.showToast({
title: '扫码'
})
},
confirm() {
uni.showToast({
title: '搜索'
})
}
}
}
</script>
<style>
.city {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 4px;
}
.input-view {
display: flex;
flex-direction: row;
flex: 1;
background-color: #f8f8f8;
height: 30px;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: 30px;
}
.nav-bar-input {
height: 30px;
line-height: 30px;
width: 370rpx;
padding: 0 5px;
font-size: 14px;
background-color: #f8f8f8;
}
</style>