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