yxt_product
/
yxt-yyth-ui-miniprogram
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

master
mac 2 years ago
parent
6252dcc1f8
commit
eb833545fb
1 changed files with 218 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 425
      components/NavBar/NavBar.vue

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>
Write Preview
Loading…
Cancel
Save