646 lines
16 KiB
Vue
646 lines
16 KiB
Vue
<template>
|
||
<view class="nav">
|
||
<view
|
||
class="nv_padding"
|
||
v-if="!!mysNavConfig.navPadding"
|
||
:style="{
|
||
height: navBarHeight,
|
||
marginTop: navBarMarginTop,
|
||
}"
|
||
></view>
|
||
<view
|
||
class="bg_box"
|
||
:style="{
|
||
backgroundColor: mysNavConfig.bgColor,
|
||
backgroundImage: mysNavConfig.bgImage,
|
||
paddingTop: navBarTop,
|
||
height: navBarHeight,
|
||
opacity: opacity,
|
||
}"
|
||
:class="{ fixed: mysNavConfig.navFixed }"
|
||
></view>
|
||
|
||
<view
|
||
class="mys_navBar"
|
||
:style="{
|
||
paddingTop: navBarTop,
|
||
height: navBarHeight,
|
||
paddingRight: navBarRight,
|
||
}"
|
||
:class="{ fixed: mysNavConfig.navFixed }"
|
||
>
|
||
<view class="my_left_box" :style="{ height: btnHeight }">
|
||
<!-- 左侧单图标 + text -->
|
||
<view class="my_left_icon" @tap="onLeftHome" :style="{ height: btnHeight, paddingLeft: navBarLeft }" v-if="isHome">
|
||
<image class="nv_icon" :src="mysNavConfig.homeIconPath || homeIconPath" />
|
||
</view>
|
||
<view
|
||
class="my_left_icon"
|
||
@tap="onLeftClick"
|
||
v-if="mysNavConfig.btnType !== 'type2' && !isHome"
|
||
:style="{ height: btnHeight, paddingLeft: navBarLeft }"
|
||
>
|
||
<image class="nv_icon" :src="mysNavConfig.leftIconPath || backIconPath" />
|
||
<view
|
||
class="leftText"
|
||
:style="{ height: btnHeight }"
|
||
v-if="!!mysNavConfig.leftText && mysNavConfig.btnType !== 'type2'"
|
||
>
|
||
<text
|
||
:style="{
|
||
color: mysNavConfig.leftText.color,
|
||
fontSize: mysNavConfig.leftText.fontSize,
|
||
fontWeight: mysNavConfig.leftText.fontWeight,
|
||
}"
|
||
>{{ mysNavConfig.leftText.text }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 左slot -->
|
||
<view class="my_left_custom" :style="{ height: btnHeight }">
|
||
<slot name="left"></slot>
|
||
</view>
|
||
|
||
<view class="btn_type" :style="{ height: btnHeight }">
|
||
<view
|
||
class="btn_box nav_btn_t1"
|
||
:style="{
|
||
width: btnWidth,
|
||
height: btnHeight,
|
||
marginLeft: navBarLeft,
|
||
borderRadius: mysNavConfig.type2Config.radius,
|
||
}"
|
||
v-if="mysNavConfig.btnType == 'type2' && !isHome"
|
||
>
|
||
<view class="btn_back" @tap="onLeftClick">
|
||
<image
|
||
class="nv_icon"
|
||
:src="mysNavConfig.type2Config.leftPath"
|
||
:style="{ height: btnHeight, width: iconW }"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="btn_home" @tap="onLeftHome">
|
||
<image
|
||
class="nv_icon"
|
||
:src="mysNavConfig.type2Config.rightPath"
|
||
:style="{ height: btnHeight, width: iconW }"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 中间slot -->
|
||
<view class="my_custom_box" :style="{ height: btnHeight }">
|
||
<!-- 搜索框 -->
|
||
<view
|
||
class="nv_search_box"
|
||
v-if="!!mysNavConfig.searchConfig"
|
||
:style="{
|
||
height: inputHeight,
|
||
backgroundColor: mysNavConfig.searchConfig.bgColor,
|
||
marginRight: mysNavConfig.searchConfig.marginRight,
|
||
marginLeft: mysNavConfig.searchConfig.marginLeft,
|
||
}"
|
||
>
|
||
<image class="nv_icon" :src="`/static/searchB.png`" mode="aspectFit" />
|
||
<input
|
||
type="text"
|
||
:value="mysNavConfig.searchConfig.value"
|
||
:placeholder="mysNavConfig.searchConfig.placeholder"
|
||
:disabled="mysNavConfig.searchConfig.disabled"
|
||
@tap="clickInput"
|
||
@input="changeInput"
|
||
@confirm="submitInput"
|
||
@confirm-type="mysNavConfig.searchConfig.ctype || 'search'"
|
||
:placeholder-style="mysNavConfig.searchConfig.placeholderStyle || ''"
|
||
class="nv_input"
|
||
/>
|
||
<view class="close" @tap="clearInput" :style="{ height: inputHeight }">
|
||
<image
|
||
v-if="mysNavConfig.searchConfig.value !== ''"
|
||
class="nv_icon"
|
||
:src="`/static/colse_fill.png`"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<slot name="center1"></slot>
|
||
</view>
|
||
</view>
|
||
<!-- 标题 -->
|
||
<view class="title_container" v-if="!mysNavConfig.searchConfig" :style="{ top: navBarTop, height: btnHeight }">
|
||
<text
|
||
class="title_text"
|
||
v-if="!!mysNavConfig.navTitle"
|
||
:style="{
|
||
color: mysNavConfig.navTitle.color,
|
||
fontSize: mysNavConfig.navTitle.fontSize,
|
||
fontWeight: mysNavConfig.navTitle.fontWeight,
|
||
}"
|
||
>{{ mysNavConfig.navTitle.text }}</text
|
||
>
|
||
<slot name="center2"></slot>
|
||
</view>
|
||
<!-- 右边slot -->
|
||
<view class="my_right_icon" :style="{ height: btnHeight }">
|
||
<image v-if="mysNavConfig.rightIconPath" @tap="onRightClick" class="nv_icon" :src="mysNavConfig.rightIconPath" />
|
||
<slot name="right"></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/* 默认首页路径 */
|
||
const homePath = "/pages/index/index";
|
||
/* 默认首页图标路径 */
|
||
const homeIconPath = "/static/home_b.png";
|
||
/* 默认返回图标路径 */
|
||
const backIconPath = "/static/back_b.png";
|
||
export default {
|
||
props: {
|
||
mysNavConfig: {
|
||
type: Object,
|
||
default() {
|
||
return {
|
||
/* 固定导航 */
|
||
navFixed: true,
|
||
/* 开启单页显示首页图标 */
|
||
isHome: true,
|
||
/* 占位开启 */
|
||
navPadding: true,
|
||
/* 背景 */
|
||
bgColor: "#f8f8f8",
|
||
/* 渐变色 */
|
||
opacity: 1,
|
||
/* 渐变开启 */
|
||
isOpacity: false,
|
||
/* 渐变延时效果 */
|
||
opacityTime: 100,
|
||
/* 左侧按钮样式 可选 type1 type2 （type2根据小程序胶囊位置调整） */
|
||
btnType: "type1",
|
||
/* type1 左侧文字配置 */
|
||
leftText: {
|
||
text: "",
|
||
color: "",
|
||
fontSize: "16px", // px upx rpx
|
||
fontWeight: "", // blod
|
||
},
|
||
/* 标题 */
|
||
navTitle: {
|
||
text: "",
|
||
color: "",
|
||
fontSize: "", // px upx rpx
|
||
fontWeight: "", // blod
|
||
},
|
||
/* type2 按钮 */
|
||
type2Config: {
|
||
// 左图标
|
||
leftPath: "/static/back_w.png",
|
||
// 右图标
|
||
rightPath: "/static/home.png",
|
||
// 圆角
|
||
radius: "40rpx",
|
||
},
|
||
/* 搜索框配置 */
|
||
// searchConfig: {
|
||
// value: "",
|
||
// confirmType: "search",
|
||
// placeholder: "",
|
||
// disabled: true,
|
||
// placeholderStyle: "",
|
||
// // marginRight: "",
|
||
// // marginLeft: "",
|
||
// },
|
||
/* 自定义事件开启 */
|
||
// isCustomFn: false,
|
||
/* 定义左侧图标 （大小是固定的16px ,想改变大小通过 slot 或 css ） */
|
||
// leftIconPath: "/static/back_b.png",
|
||
/* 定义右侧图标 */
|
||
// rightIconPath: "/static/home.png",
|
||
/* home图标 */
|
||
// homeIconPath: "/static/home.png",
|
||
};
|
||
},
|
||
},
|
||
scrollTop: {
|
||
type: Number,
|
||
default: function () {
|
||
return 0;
|
||
},
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
iconW: undefined,
|
||
iconH: undefined,
|
||
btnWidth: undefined,
|
||
btnHeight: undefined,
|
||
navBarTop: undefined,
|
||
navBarHeight: undefined,
|
||
navBarMarginTop: undefined,
|
||
navBarLeft: undefined,
|
||
navBarRight: undefined,
|
||
inputHeight: undefined,
|
||
opacity: 0,
|
||
isHome: false,
|
||
homeIconPath: homeIconPath,
|
||
backIconPath: backIconPath,
|
||
};
|
||
},
|
||
computed: {
|
||
isSharePage() {},
|
||
},
|
||
watch: {
|
||
scrollTop(val) {
|
||
if (!this.mysNavConfig.isOpacity) {
|
||
return;
|
||
}
|
||
this.setOpacity(val, this.mysNavConfig.opacityTime);
|
||
},
|
||
},
|
||
methods: {
|
||
init() {
|
||
if (this.mysNavConfig.isHome) {
|
||
let pages = getCurrentPages().length;
|
||
/* 单页显示home图标 */
|
||
pages == 1 ? (this.isHome = true) : (this.isHome = false);
|
||
}
|
||
// 开启渐变 强制fixed
|
||
this.navBarTop = uni.getSystemInfoSync().statusBarHeight + "px";
|
||
if (!this.mysNavConfig.opacity) {
|
||
this.opacity = 1;
|
||
!this.mysNavConfig.isOpacity ? (this.opacity = 1) : ((this.mysNavConfig.navFixed = true), (this.opacity = 0));
|
||
} else {
|
||
this.opacity = this.mysNavConfig.opacity;
|
||
!this.mysNavConfig.isOpacity ? "" : ((this.mysNavConfig.navFixed = true), (this.opacity = 0));
|
||
}
|
||
|
||
// #ifdef MP
|
||
this.initMP();
|
||
// #endif
|
||
// #ifdef APP-PLUS-NVUE
|
||
this.navBarHeight = 44 + uni.getSystemInfoSync().statusBarHeight + "px";
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.navBarHeight = 44 + uni.getSystemInfoSync().statusBarHeight + "px";
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.navBarMarginTop = 88 + "rpx";
|
||
// #endif
|
||
},
|
||
/* 小程序初始化位置 */
|
||
initMP() {
|
||
let gS = uni.getSystemInfoSync();
|
||
let rect = uni.getMenuButtonBoundingClientRect();
|
||
|
||
let rectHeight = rect.height;
|
||
this.btnWidth = rect.width + "px";
|
||
this.iconW = Math.floor(rect.width / 4 - 5) + "px";
|
||
this.iconH = rectHeight / 2 + "px";
|
||
this.btnHeight = rectHeight + "px";
|
||
this.inputHeight = rectHeight - 3 + "px";
|
||
this.navBarTop = rect.top + "px";
|
||
this.navBarLeft = gS.screenWidth - rect.right + "px";
|
||
this.navBarRight = gS.screenWidth - rect.right + rect.width + "px";
|
||
this.navBarHeight = gS.statusBarHeight + rectHeight + (rect.top - gS.statusBarHeight) * 2 + "px";
|
||
},
|
||
/* 点击左侧 */
|
||
onLeftClick() {
|
||
if (this.mysNavConfig.isCustomFn) {
|
||
this.$emit("onLeftClick");
|
||
} else {
|
||
console.log("back");
|
||
uni.navigateBack();
|
||
}
|
||
},
|
||
/* type2 返回首页 */
|
||
onLeftHome() {
|
||
uni.switchTab({
|
||
url: homePath,
|
||
});
|
||
},
|
||
/* 点击右侧 */
|
||
onRightClick() {
|
||
console.log("onRightClick");
|
||
uni.showToast({
|
||
title: "onRightClick",
|
||
duration: 1000,
|
||
});
|
||
this.$emit("onRightClick");
|
||
},
|
||
/**
|
||
* @param scrollTop 页面顶部距离
|
||
* @param down 滑动显示效果延时
|
||
*/
|
||
setOpacity(scrollTop, down = 60) {
|
||
if (scrollTop > 0) {
|
||
if (scrollTop < down) {
|
||
this.opacity = scrollTop / down;
|
||
}
|
||
if (scrollTop > down) {
|
||
this.opacity = 1;
|
||
}
|
||
} else {
|
||
this.opacity = 0;
|
||
}
|
||
},
|
||
/* 搜索框改变值 */
|
||
changeInput(e) {
|
||
this.$emit("changeInput", e);
|
||
},
|
||
/* 搜索框提交 */
|
||
submitInput(e) {
|
||
this.$emit("submitInput", e);
|
||
},
|
||
/* 清空搜索 */
|
||
clearInput() {
|
||
this.$emit("clearInput");
|
||
},
|
||
/* 禁用状态下点击搜索框 */
|
||
clickInput() {
|
||
this.$emit("clickInput");
|
||
},
|
||
},
|
||
created() {
|
||
this.init();
|
||
},
|
||
onReady() {
|
||
// setTimeout(() => {
|
||
// // 改变手机状态栏颜色
|
||
// uni.setNavigationBarColor({
|
||
// frontColor: "#000000",
|
||
// backgroundColor: "#FF4258",
|
||
// });
|
||
// }, 10);
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.nav {
|
||
position: relative;
|
||
top:0;
|
||
/* #ifndef APP-PLUS */
|
||
height: 140upx;
|
||
/* #endif */
|
||
height: 88upx;
|
||
}
|
||
.nv_padding {
|
||
height: 100upx;
|
||
background-color: transparent;
|
||
}
|
||
/* 图标默认大小 */
|
||
.nv_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.bg_box {
|
||
position: absolute;
|
||
width: 750upx;
|
||
/* #ifndef APP-PLUS */
|
||
height: 140upx;
|
||
/* #endif */
|
||
height: 88upx;
|
||
z-index: 10;
|
||
top: 0;
|
||
background-color: transparent;
|
||
/* #ifdef MP */
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center center;
|
||
/* #endif */
|
||
}
|
||
.mys_navBar {
|
||
/* #ifndef APP-PLUS */
|
||
height: 140upx;
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
height: 88upx;
|
||
/* #endif */
|
||
// #ifdef MP
|
||
box-sizing: border-box;
|
||
// #endif
|
||
width: 750upx;
|
||
flex-direction: row;
|
||
background-color: transparent;
|
||
position: absolute;
|
||
z-index: 10;
|
||
top: 0;
|
||
}
|
||
.fixed {
|
||
position: fixed;
|
||
}
|
||
/*
|
||
left 按钮
|
||
*/
|
||
.btn_type {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
margin-left: 16upx;
|
||
/* #endif */
|
||
// #ifndef MP
|
||
align-items: center;
|
||
// #endif
|
||
flex: 1;
|
||
flex-direction: row;
|
||
}
|
||
.btn_box {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
margin-left: 16upx;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
// #ifndef MP
|
||
align-items: center;
|
||
// #endif
|
||
}
|
||
.btn_back,
|
||
.btn_home {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
height: 100%;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
width: 76upx;
|
||
height: 62upx;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 按钮类型1 */
|
||
.nav_btn_t1 {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
// #ifdef MP
|
||
box-sizing: border-box;
|
||
// #endif
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-style: solid;
|
||
border-width: 1px;
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
width: 150upx;
|
||
height: 62upx;
|
||
}
|
||
|
||
.line {
|
||
width: 1upx;
|
||
height: 60%;
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
height: 30upx;
|
||
/* #endif */
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/*
|
||
标题
|
||
*/
|
||
.title_container {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
position: absolute;
|
||
left: 375upx;
|
||
bottom: 0;
|
||
transform: translateX(-50%);
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.title_text {
|
||
// flex: 1;
|
||
text-overflow: ellipsis;
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS-NVUE */
|
||
lines: 1;
|
||
/* #endif */
|
||
}
|
||
/*
|
||
左边自定义
|
||
*/
|
||
.my_left_box {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.my_left_icon {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifndef MP */
|
||
margin-left: 18upx;
|
||
/* #endif */
|
||
}
|
||
.my_left_custom {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
}
|
||
|
||
/* 文字 */
|
||
.leftText {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-left: 4upx;
|
||
font-size: 15px;
|
||
}
|
||
/*
|
||
中间
|
||
*/
|
||
.my_custom_box {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
}
|
||
/*
|
||
搜索框
|
||
*/
|
||
.nv_search_box {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
/* #ifndef MP */
|
||
height: 60upx;
|
||
/* #endif */
|
||
background-color: #f8f8f8;
|
||
padding-right: 20upx;
|
||
padding-left: 20upx;
|
||
border-radius: 60upx;
|
||
margin-right: 15upx;
|
||
margin-left: 15upx;
|
||
}
|
||
.nv_input {
|
||
flex: 1;
|
||
padding-left: 16upx;
|
||
font-size: 13px;
|
||
}
|
||
.close {
|
||
width: 50upx;
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifndef MP */
|
||
height: 62upx;
|
||
/* #endif */
|
||
}
|
||
|
||
/*
|
||
右边 自定义
|
||
*/
|
||
.my_right_icon {
|
||
/* #ifndef APP-PLUS-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* #ifndef MP */
|
||
// min-width: 70upx;
|
||
/* #endif */
|
||
padding-left: 6px;
|
||
padding-right: 10px;
|
||
}
|
||
</style>
|