product_platform/yxt-yyth-ui-miniprogram
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
mac
2023-12-04 20:57:27 +08:00
parent 6252dcc1f8
commit eb833545fb
1 changed files with 218 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

425
components/NavBar/NavBar.vue
View File

@@ -1,208 +1,219 @@
<template> <template>
<view> <view>
<!-- 左侧布局 --> <!-- 左侧布局 -->
<view v-if="navStyle==='left'" class="_navLayout" <view v-if="navStyle==='left'" class="_navLayout"
:style="{'background': navBackground,'height':navStatusHeight}"> :style="{'background': navBackground,'height':navStatusHeight}">
<!-- 状态栏 --> <!-- 状态栏 -->
<view :style="{'height':statusBarHeight}"></view> <view :style="{'height':statusBarHeight}"></view>
<!-- 导航栏,去掉了不可用的宽度 --> <!-- 导航栏,去掉了不可用的宽度 -->
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> <view class="_nav-real"
<view class="_navIcon2" > :style="{'height':navHeight,'width':'calc('+enableWidth+' - 9px)' ,'margin-left':'9px','background':'red'}">
<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image> <view class="_navIcon2">
</view> <image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image>
<!-- 标题布局 --> </view>
<view style="font-size: 17px;padding-left: 4px;">首页</view> <!-- 标题布局 -->
</view> <view class="_nav-title2" :style="{'font-size':fontSize}">>{{navTitle}}</view>
</view> </view>
</view>
<!-- 居中布局 -->
<!-- ②这里不使用props改用data --> <!-- 居中布局 -->
<view v-if="navStyle==='center'" class="_navLayout" <!-- ②这里不使用props改用data -->
:style="{'background': navBackground,'height':navStatusHeight}"> <view v-if="navStyle==='center'" class="_navLayout"
<!-- 状态栏 --> :style="{'background': navBackground,'height':navStatusHeight}">
<view :style="{'height':statusBarHeight}"></view> <!-- 状态栏 -->
<!-- 导航栏,去掉了不可用的宽度 --> <view :style="{'height':statusBarHeight}"></view>
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> <!-- 导航栏,去掉了不可用的宽度 -->
<!-- 按键区域，占用为不可用的宽度 --> <view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}">
<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}"> <!-- 按键区域，占用为不可用的宽度 -->
<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image> <view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}">
</view> <image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image>
<!-- 标题布局 --> </view>
<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}"> <!-- 标题布局 -->
{{navTitle}} <view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
</view> {{navTitle}}
</view> </view>
</view> </view>
</view>
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>
</view>
</template> </view>
</template>
<script>
/** <script>
* 全局默认背景透明，supportChange= false 会对默认色变成不透明 /**
*/ * 全局默认背景透明，supportChange= false 会对默认色变成不透明
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)"; */
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)";
export default {
name: "NavBar", export default {
props: { name: "NavBar",
color: { props: {
type: String, color: {
default: "white" type: String,
}, default: "white"
// 标题 },
navTitle: { // 标题
type: String, navTitle: {
default: "" type: String,
}, default: ""
// 是否支持透明 },
supportChange: { // 是否支持透明
type: Boolean, supportChange: {
default: true type: Boolean,
}, default: true
// 背景色 },
// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明 // 背景色
navBg: { // 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
type: String, navBg: {
default: defaultTransparentBg type: String,
}, default: defaultTransparentBg
// 渐变开始的高度 0->1 },
startChangeHeight: { // 渐变开始的高度 0->1
type: Number, startChangeHeight: {
default: 0 type: Number,
}, default: 0
// 渐变停止的高度 },
// ->1 // 渐变停止的高度
endChangeHeight: { // ->1
type: Number, endChangeHeight: {
default: 0 type: Number,
}, default: 0
// 显示icon },
showIcon: { // 显示icon
type: Boolean, showIcon: {
default: true type: Boolean,
} default: true
}, }
data() { },
return { data() {
// ①用一个新的变量接收props属性 return {
navBackground: this.navBg, // ①用一个新的变量接收props属性
navStatusHeight: 0, navBackground: this.navBg,
statusBarHeight: 0, navStatusHeight: 0,
navHeight: 0, statusBarHeight: 0,
disableWidth: 0, navHeight: 0,
enableWidth: 0, disableWidth: 0,
enableHeight: 0, enableWidth: 0,
fontSize: 0, enableHeight: 0,
navStyle: 'left' fontSize: 0,
}; navStyle: 'left'
}, };
mounted() { },
// mounted能拿到data值 mounted() {
if (!this.supportChange) { // mounted能拿到data值
if (this.navBg === defaultTransparentBg) { if (!this.supportChange) {
// 使用默认的时候由于是全透明，需要改成不透明 if (this.navBg === defaultTransparentBg) {
// ③达到修改props属性的结果 // 使用默认的时候由于是全透明，需要改成不透明
this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)") // ③达到修改props属性的结果
} this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)")
} }
// 赋值样式 }
// this.navStyle = getApp().globalData.navInfo.navBar.style // 赋值样式
}, this.navStyle = getApp().globalData.navInfo.navBar.style
created() { },
// create阶段能拿取到了props的值,需要使用this.变量名 created() {
// 但是拿不到data的值 // create阶段能拿取到了props的值,需要使用this.变量名
// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用 // 但是拿不到data的值
let navInfo = getApp().globalData.navInfo // 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
// 总高度 let navInfo = getApp().globalData.navInfo
this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit // 总高度
this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit
this.navHeight = navInfo.navBar.height + navInfo.unit this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit
this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit this.navHeight = navInfo.navBar.height + navInfo.unit
this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit
this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit
this.fontSize = navInfo.navBar.fontSize + navInfo.unit this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit
}, this.fontSize = navInfo.navBar.fontSize + navInfo.unit
methods: { },
/** methods: {
* 自定义颜色渐变的值 /**
*/ * 自定义颜色渐变的值
alpha(res) { */
if (!this.supportChange) alpha(res) {
return '1.0' if (!this.supportChange)
if (res.scrollTop > this.startChangeHeight) { return '1.0'
// 可以开始变化了 if (res.scrollTop > this.startChangeHeight) {
if (res.scrollTop < this.endChangeHeight) { // 可以开始变化了
return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + '' if (res.scrollTop < this.endChangeHeight) {
} else { return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
// 保持长显示 } else {
return '1.0' // 保持长显示
} return '1.0'
} else { }
// 保持无色 } else {
return '0.0' // 保持无色
} return '0.0'
}, }
/** },
* 提供默认的颜色变化功能 /**
*/ * 提供默认的颜色变化功能
defaultColorBgAlpha(res) { */
let x = this.alpha(res) defaultColorBgAlpha(res) {
this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x + let x = this.alpha(res)
") 0.75%,rgba(255,177,118," + x + ") 99.78%)" this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x +
}, ") 0.75%,rgba(255,177,118," + x + ") 99.78%)"
clickIcon() { },
uni.navigateBack() clickIcon() {
} uni.navigateBack()
} }
} }
</script> }
</script>
<style>
._navLayout { <style>
display: flex; ._navLayout {
flex-direction: column; display: flex;
width: 100%; flex-direction: column;
z-index: 999; width: 100%;
top: 0; z-index: 999;
position: fixed; top: 0;
} position: fixed;
}
._nav-real {
display: flex; ._nav-real {
flex-direction: row; display: flex;
width: 100%; flex-direction: row;
align-items: center; width: 100%;
} align-items: center;
}
._nav-title {
text-align: center; ._nav-title {
text-overflow: ellipsis; text-align: center;
overflow: hidden; text-overflow: ellipsis;
word-break: break-all; overflow: hidden;
white-space: nowrap; word-break: break-all;
width: 100%; white-space: nowrap;
color: white; width: 100%;
} color: white;
}
._navIcon {
display: flex; ._nav-title2 {
flex-direction: row; text-overflow: ellipsis;
align-items: center; overflow: hidden;
padding-left: 3px; word-break: break-all;
flex-shrink: 0; white-space: nowrap;
} width: 100%;
color: white;
._navIcon2 { padding-left: 5px;
display: flex; flex: 1;
flex-direction: row; }
align-items: center;
margin-left: 10px; ._navIcon {
flex-shrink: 0; display: flex;
padding-right: 4px; flex-direction: row;
} align-items: center;
padding-left: 3px;
flex-shrink: 0;
}
._navIcon2 {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 0;
padding-right: 6px;
}
</style> </style>