czg_team/Hfive
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

小程序编译0.0.0

Browse Source
This commit is contained in:
魏啾
2024-11-13 09:25:34 +08:00
parent 1fbf346aec
commit 2147f86b93
65 changed files with 3745 additions and 852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/navseat.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="content">
<view class="navbarcontent">
<!-- 导航栏 -->
<view class="navbar" :class="{active:opacity}">
<view class="navbar" :class="{active:opacity}" v-if="shownav">
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
<view class="status-bar"></view>
<view class="navbar_tow flex-between"
@@ -12,52 +12,175 @@
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="navbar_tow flex-between"
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
:style="{'height':HeighT.customBar + ( (HeighT.heightBar - systemInfo.statusBarHeight)*2 )+'px','marginTop': ( HeighT.heightBar - (HeighT.heightBar - systemInfo.statusBarHeight))+'px','padding-right':HeighT.custwidth + 'px'}">
<!-- #endif -->
<!-- 标题搜索框 -->
<view class="flex-between" @click="clicknavigateBack">
<view class="navbar_tow_one flex-start">
<u-icon name="arrow-left" color="#000" size="24"></u-icon>
<view class="flex-between" v-if="opacity&&inputshow">
<view class="navbar_tow_one flex-start" v-if="iconshow" @click="clicknavigateBack">
<u-icon name="arrow-left" :color="iconcolor" size="20"></u-icon>
</view>
<view class="navbar_tow_tow" v-if="opacity || titleshow">
{{title}}
<view class="navbar_tow_tow " @click="inputFocus" style="position: relative;">
<u--input placeholder="请输入内容" class="custom-input" border="surround" :focus="focus"
@confirm="confirmSearch" v-model="searchVal" :readonly="readonly"
prefixIcon="search" prefixIconStyle="font-size: 18px;color: #909399"
placeholderStyle="font-size: 14px;color: #999" fontSize="14px"
:customStyle="{padding: '3rpx 10rpx ',width: '400rpx',borderRadius: '30rpx',backgroundColor: '#eee'}">
</u--input>
</view>
</view>
<!-- 正常导航栏 -->
<view class="flex-between" @click="clicknavigateBack" v-else>
<view class="navbar_tow_one flex-start" v-if="iconshow">
<u-icon name="arrow-left" :color="iconcolor" size="20"></u-icon>
</view>
<!-- #ifndef MP-WEIXIN -->
<view class="navbar_tow_tow" v-if="opacity || titleshow" :style="{color: namecolor}">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="navbar_tow_tow" v-if="opacity || titleshow"
:style="{'padding-left':HeighT.custwidth-14 + 'px',color: namecolor}">
<!-- #endif -->
{{title}}
</view>
</view>
</view>
</view>
</view>
<view class="" :style="{'height':HeighT.customBar+'px'}">
<view class="" v-if="heightshow" :style="{height:Topdistance +'px'}">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
return {
Topdistance: '',
searchVal: "",
systemInfo: '',
// keyword
};
},
props: {
// // #ifdef H5
// shownav: {
// type: Boolean,
// default: false
// },
// // #endif
// // #ifdef MP-WEIXIN
// shownav: {
// type: Boolean,
// default: true
// },
// // #endif
shownav: {
type: Boolean,
default: true
},
title: {
type: String,
default: ''
},
namecolor: {
type: String,
default: '#333333'
},
search: {
type: Boolean,
default: false
},
opacity: {
type: Boolean,
default: false
},
titleshow: {
titleshow: { //标题是否显示
type: Boolean,
default: false
},
heightshow: { //是否要占位高度
type: Boolean,
default: true
},
iconshow: { //返回键是否显示
type: Boolean,
default: true
},
iconcolor: { //返回键颜色
type: String,
default: '#000'
},
navigateBacknavtitle: {
type: Boolean,
default: false
},
inputshow: {
type: Boolean,
default: false
},
focus: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
}
},
computed: {
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
},
},
mounted() {
this.$nextTick(() => {
wx.getSystemInfo({
success: res => {
this.systemInfo = res;
// #ifdef H5
this.GetTop()
// #endif
}
})
});
// 当组件挂载完成后获取距离
},
onReady() {
this.$nextTick(() => {
this.GetTop()
});
},
methods: {
clicknavigateBack(){
uni.navigateBack()
async GetTop() {
setTimeout(async () => {
let res = await this.$u.getRect('.navbar')
console.log(res)
this.Topdistance = res.height //滚动距离
this.$emit('Topdistance', res.height)
}, 100)
},
clicknavigateBack() {
// if (this.navigateBacknavtitle) {
// this.$emit('navigateBacknav')
// } else {
uni.navigateBack()
// }
},
/**
* 搜索点击处理
*/
inputFocus() {
console.log(123)
this.$emit('searchStatus', 'searchClick')
},
confirmSearch() {
this.$emit('searchVal', this.searchVal)
}
}
@@ -66,15 +189,16 @@
<style scoped lang="scss">
page {
background: #F9F9F9;
background: #F7F7F7;
}
.content {
position: -webkit-sticky;
position: sticky;
.navbarcontent {
position: relative;
top: 0;
z-index: 999999;
background: #2f87fd;
left: 0;
width: 100%;
z-index: 9999;
.active {
background: rgba(249, 249, 249, 1);
}
@@ -97,9 +221,10 @@
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background: #3088fd;
.navbar_tow {
width: 100%;
position: relative;
@@ -138,12 +263,24 @@
}
.navbar_tow_tow {
width: 200rpx;
text-align: center;
flex: auto;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #333333;
position: relative;
.u--input {
width: 200rpx;
input {
font-size: 28rpx;
}
}
}
}