You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
4.9 KiB
186 lines
4.9 KiB
<template> |
|
<view class="container"> |
|
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" |
|
title="自定义导航栏" @clickLeft="back" /> |
|
<uni-card is-full :isShadow="false"> |
|
<text |
|
class="uni-h6">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考https://ask.dcloud.net.cn/article/34921</text> |
|
</uni-card> |
|
<uni-section title="基本用法" subTitle="使用 title 属性设置导航栏标题" type="line" style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar title="标题" /> |
|
</view> |
|
</uni-section> |
|
<uni-section title="开启阴影" subTitle="使用 shadow 属性启用阴影" type="line" style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar shadow left-icon="left" title="开启阴影" @clickLeft="back" /> |
|
</view> |
|
</uni-section> |
|
<uni-section title="开启暗黑模式" subTitle="使用 dark 属性设置暗黑模式" type="line" style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar shadow left-icon="left" dark title="暗黑模式" @clickLeft="back" /> |
|
</view> |
|
</uni-section> |
|
<uni-section title="带返回箭头+右侧图标" subTitle="使用 left-icon/right-icon 设置左右图标" type="line" |
|
style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar shadow left-icon="left" right-icon="cart" title="标题" /> |
|
</view> |
|
</uni-section> |
|
<uni-section title="左侧文字+右侧文字" subTitle="使用 left-text/right-text 设置左右文字" type="line" |
|
style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="设置" title="标题" /> |
|
</view> |
|
</uni-section> |
|
<uni-section title="自定义颜色" subTitle="使用 color/background-color 属性设置前景背景色" type="line" |
|
style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<view class="box-bg"> |
|
<uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow left-icon="left" leftText="返回" |
|
rightText="设置" title="自定义颜色" /> |
|
</view> |
|
</view> |
|
</uni-section> |
|
<uni-section title="自定义高度" subTitle="使用 height 修改组件高度" type="line" style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<view class="box-bg"> |
|
<uni-nav-bar height="65px" dark shadow left-icon="left" leftText="返回" rightText="设置" |
|
title="自定义高度" /> |
|
</view> |
|
</view> |
|
</uni-section> |
|
<uni-section title="自定义内容" subTitle="使用 left/right/default 插槽自定义内容" type="line" style="margin-bottom: 3px;"> |
|
<view class="box-bg"> |
|
<uni-nav-bar> |
|
<template v-slot:left> |
|
<view class="city"> |
|
<view> |
|
<text class="uni-nav-bar-text">{{ city }}</text> |
|
</view> |
|
<uni-icons type="arrowdown" color="#666" size="18" /> |
|
</view> |
|
</template> |
|
<view class="input-view"> |
|
<uni-icons class="input-uni-icon" type="search" size="18" color="#999" /> |
|
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" |
|
@confirm="confirm" /> |
|
</view> |
|
<template v-slot:right> |
|
<view class="city"> |
|
搜索 |
|
</view> |
|
</template> |
|
</uni-nav-bar> |
|
</view> |
|
</uni-section> |
|
|
|
|
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
components: {}, |
|
data() { |
|
return { |
|
city: '北京' |
|
} |
|
}, |
|
methods: { |
|
back() { |
|
uni.navigateBack({ |
|
delta: 1 |
|
}) |
|
}, |
|
showMenu() { |
|
uni.showToast({ |
|
title: '菜单' |
|
}) |
|
}, |
|
clickLeft() { |
|
uni.showToast({ |
|
title: '左侧按钮' |
|
}) |
|
}, |
|
search() { |
|
uni.showToast({ |
|
title: '搜索' |
|
}) |
|
}, |
|
showCity() { |
|
uni.showToast({ |
|
title: '选择城市' |
|
}) |
|
}, |
|
scan() { |
|
uni.showToast({ |
|
title: '扫码' |
|
}) |
|
}, |
|
confirm() { |
|
uni.showToast({ |
|
title: '搜索' |
|
}) |
|
} |
|
}, |
|
onPullDownRefresh() { |
|
console.log('onPullDownRefresh') |
|
setTimeout(function() { |
|
uni.stopPullDownRefresh() |
|
console.log('stopPullDownRefresh') |
|
}, 1000) |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
$nav-height: 30px; |
|
|
|
.box-bg { |
|
background-color: #F5F5F5; |
|
padding: 5px 0; |
|
} |
|
|
|
.city { |
|
/* #ifndef APP-PLUS-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: flex-start; |
|
// width: 160rpx; |
|
margin-left: 4px; |
|
} |
|
|
|
.input-view { |
|
/* #ifndef APP-PLUS-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
// width: 500rpx; |
|
flex: 1; |
|
background-color: #f8f8f8; |
|
height: $nav-height; |
|
border-radius: 15px; |
|
padding: 0 15px; |
|
flex-wrap: nowrap; |
|
margin: 7px 0; |
|
line-height: $nav-height; |
|
} |
|
|
|
.input-uni-icon { |
|
line-height: $nav-height; |
|
} |
|
|
|
.nav-bar-input { |
|
height: $nav-height; |
|
line-height: $nav-height; |
|
/* #ifdef APP-PLUS-NVUE */ |
|
width: 370rpx; |
|
/* #endif */ |
|
padding: 0 5px; |
|
font-size: 12px; |
|
background-color: #f8f8f8; |
|
} |
|
</style>
|
|
|