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>
|
|
|