求职

components/Navbar/index.vue

@@ -1,6 +1,7 @@
 <template>
   <view
     class="navbar-box"
+    :class="{'gradientBgc': !noBgColor}"
     :style="{
       'height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
       'line-height': (navbarHeight < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight) + 'px',
@@ -29,6 +30,11 @@ defineProps({
   showLogo: {
     type: Boolean,
     default: false
+  },
+  // 是否需要渐变背景
+  noBgColor: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -41,13 +47,19 @@ onLoad(() => {
   const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
   navbarHeight.value = menuButtonInfo.height + ((menuButtonInfo.top - statusBarHeight.value) * 2) + 15
 })
+
+defineExpose({
+  height: navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value
+})
 </script>
 
 <style scoped lang="scss">
+.gradientBgc {
+  background: linear-gradient(180deg, #9bfece, #BCFEDE);
+}
 .navbar-box {
   width: 100%;
   position: relative;
-  background: linear-gradient(180deg, #9bfece, #BCFEDE);
   &-logo {
     position: absolute;
     left: 10px;

pages/index/position.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <Navbar :showLogo="true" />
+    <Navbar :showLogo="true" ref="navRef" :noBgColor="noBgColor" />
     <view class="box defaultBgc">
       <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
         <view>
@@ -88,6 +88,7 @@ onLoad(() => {
   if (!uni.getStorageSync('token')) getRewardEventList()
 })
 
+const navRef = ref()
 const more = ref('more')
 // 轮播图-优选集团信息
 const preferredGroup = ref({})
@@ -267,17 +268,16 @@ const scrollTop = ref(0)
 const old = ref({
   scrollTop: 0
 })
+const noBgColor = ref(false)
 const onScroll = (e) =>{
+  // const navbarHeight = navRef.value?.height ||  55
+  // noBgColor.value = e.detail.scrollTop > (navbarHeight + 160 + 82) ? true : false
+
   old.value.scrollTop = e.detail.scrollTop
 }
 
 const handleSearch = (key, value) => {
   query[key] = value
-  // if (key === 'positionId' || key === 'payScope') {
-  //   query[key] = value || null
-  // } else {
-  //   query[key] = value ? [value] : []
-  // }
   onSearch()
 }