159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<!--
|
||
组件功能： 自定义导航栏包裹 , 基于： uni-nav-bar 的封装。
|
||
1. pages.json : "navigationStyle": "custom"
|
||
2. 页面引入该组件。
|
||
3. 如果背景透明并且需要下滑变默认背景色。 需要在页面实现： onPageScroll函数（可以空函数）， 否则该组件无法正常监听。
|
||
|
||
|
||
示例：
|
||
|
||
背景通铺效果
|
||
<JeepayCustomNavbar :transparent="true" bgDefaultColor='#b6a3a3' title="背景通铺效果" backCtrl="back" ></JeepayCustomNavbar>
|
||
import { onPageScroll } from '@dcloudio/uni-app'
|
||
onPageScroll(() => {})
|
||
|
||
纯色导航条
|
||
<JeepayCustomNavbar :transparent="false" bgDefaultColor='#ffaa7f' title="纯色导航条" backCtrl="back"></JeepayCustomNavbar>
|
||
|
||
自定义左上角 效果
|
||
<JeepayCustomNavbar :transparent="true" bgDefaultColor='#ff557f' title="自定义左上角" backCtrl="back">
|
||
<view> 选择门店（自定义导航条内容） </view>
|
||
</JeepayCustomNavbar>
|
||
|
||
@author terrfly
|
||
@site https://www.jeequan.com
|
||
@date 2022/11/18 14:32
|
||
-->
|
||
<template>
|
||
<view>
|
||
<uni-nav-bar
|
||
fixed
|
||
:statusBar="true"
|
||
:border="false"
|
||
:height="props.height"
|
||
:backgroundColor="vdata.backgroundColor"
|
||
leftWidth="100%"
|
||
>
|
||
<!-- 使用左侧插槽 100%宽度 -->
|
||
<template #left>
|
||
<view class="left-slot-view">
|
||
<slot>
|
||
<view class="nav-bar-box">
|
||
<view>
|
||
<!-- 左侧按钮 -->
|
||
<uni-icons v-if="props.backCtrl" class="left-back" @click="backFunc" :type="props.backIcon" size="20" :color="props.textColor"></uni-icons>
|
||
</view>
|
||
|
||
<!-- 标题 -->
|
||
<view class="text" :style="{ color: props.textColor }"> {{props.title}} </view>
|
||
</view>
|
||
</slot>
|
||
</view>
|
||
</template>
|
||
</uni-nav-bar>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onPageScroll } from '@dcloudio/uni-app'
|
||
import { reactive, ref, onMounted } from 'vue'
|
||
import ak from '@/commons/utils/ak.js'
|
||
|
||
// 定义组件参数
|
||
const props = defineProps({
|
||
|
||
// 标题
|
||
title: { type: String, default: '' },
|
||
|
||
// 文字颜色
|
||
textColor: { type: String, default: 'black' },
|
||
|
||
// 返回按钮类型
|
||
backIcon: { type: String, default: 'back' },
|
||
|
||
// 高度： 默认与uni-nav-bar 保持一致。
|
||
height: { type: Number, default: 44 },
|
||
|
||
// 默认背景色：
|
||
bgDefaultColor: { type: String, default: 'white' },
|
||
|
||
// 是否默认透明（此时可自定义背景）， 当滑动时将切换为默认背景色。
|
||
transparent: { type: Boolean, default: false },
|
||
|
||
// 返回按钮的操作项： null-无返回按钮， back 返回上一页， pageUrl: '', 也可以是回调函数。
|
||
backCtrl: [ String, Function ],
|
||
|
||
})
|
||
|
||
// 只有透明色时 才需要监听
|
||
if(props.transparent){
|
||
|
||
onPageScroll((e) => { // 切换背景颜色 透明 or 主题色。
|
||
if(e.scrollTop > (props.height / 2.5) ){
|
||
vdata.backgroundColor = props.bgDefaultColor
|
||
}else{
|
||
vdata.backgroundColor = 'transparent'
|
||
}
|
||
})
|
||
}
|
||
|
||
// 颜色
|
||
const vdata = reactive({
|
||
backgroundColor: 'transparent' // 默认透明色
|
||
})
|
||
|
||
|
||
onMounted(() => {
|
||
// 当非透明色， 需要改为默认颜色
|
||
if(!props.transparent){
|
||
vdata.backgroundColor = props.bgDefaultColor + '';
|
||
}
|
||
})
|
||
|
||
// 点击返回按钮，
|
||
function backFunc(){
|
||
|
||
if(!props.backCtrl){
|
||
return false;
|
||
}
|
||
|
||
if(typeof props.backCtrl == 'function'){
|
||
return props.backCtrl()
|
||
}
|
||
|
||
if(props.backCtrl === 'back'){
|
||
return ak.go.back()
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.left-slot-view {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 100%;
|
||
font-size: 33rpx;
|
||
font-weight: 500;
|
||
.nav-bar-box {
|
||
display: flex;
|
||
flex-grow: 1;
|
||
justify-content: space-between;
|
||
.left-back {
|
||
position: absolute;
|
||
}
|
||
&::after {
|
||
content: "";
|
||
}
|
||
}
|
||
|
||
}
|
||
::v-deep.uni-navbar__header {
|
||
.uni-navbar__header-container,
|
||
.uni-navbar__header-btns-right {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style> |