sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

附近页面滚动问题修复

Browse Source
This commit is contained in:
francis_fh
2025-12-05 13:31:15 +08:00
parent ed077fd93c
commit 0fbba1d868
5 changed files with 503 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
pages/nearby/components/four.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom"> <view class="nearby-container">
<view class="two-head"> <view class="two-head">
<view <view
class="head-item" class="head-item"
@@ -11,66 +11,68 @@
{{ item.commercialAreaName }} {{ item.commercialAreaName }}
</view> </view>
</view> </view>
<view class="nearby-list"> <scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
<view class="nav-filter" @touchmove.stop.prevent> <view class="nearby-list">
<view class="filter-top"> <view class="nav-filter" @touchmove.stop.prevent>
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll"> <view class="filter-top">
<view class="jobs-left"> <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view <view class="jobs-left">
class="job button-click" <view
:class="{ active: state.tabIndex === 'all' }" class="job button-click"
@click="choosePosition('all')" :class="{ active: state.tabIndex === 'all' }"
> @click="choosePosition('all')"
全部 >
全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view>
</view> </view>
<view </scroll-view>
class="job button-click" <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
:class="{ active: state.tabIndex === index }" <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
v-for="(item, index) in userInfo.jobTitle" <text>添加</text>
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">
<view
class="button-click filterbtm"
:class="{ active: pageState.search.order === item.value }"
v-for="item in rangeOptions"
@click="handelHostestSearch(item)"
:key="item.value"
>
{{ item.text }}
</view> </view>
</view> </view>
<view class="btm-right button-click" @click="openFilter"> <view class="filter-bottom">
筛选 <view class="btm-left">
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image> <view
class="button-click filterbtm"
:class="{ active: pageState.search.order === item.value }"
v-for="item in rangeOptions"
@click="handelHostestSearch(item)"
:key="item.value"
>
{{ item.text }}
</view>
</view>
<view class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view>
</view> </view>
</view> </view>
<view class="one-cards">
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view> </view>
<view class="one-cards"> </scroll-view>
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
<!-- 筛选 --> <!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter> <select-filter ref="selectFilterModel"></select-filter>
</scroll-view> </view>
</template> </template>
<script setup> <script setup>
@@ -273,9 +275,20 @@ defineExpose({ loadData, handleFilterConfirm });
<style lang="stylus" scoped> <style lang="stylus" scoped>
.tabchecked .tabchecked
color: #4778EC !important color: #4778EC !important
.nearby-scroll
.nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
.two-head
.nearby-scroll
// 使用flex布局让scroll-view自适应高度，占据剩余空间
flex: 1;
overflow: hidden;
.two-head
margin: 22rpx; margin: 22rpx;
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap
@@ -303,7 +316,6 @@ defineExpose({ loadData, handleFilterConfirm });
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
.nearby-list .nearby-list
border-top: 2rpx solid #EBEBEB; border-top: 2rpx solid #EBEBEB;
height: 100%
.one-cards{ .one-cards{
display: flex; display: flex;
flex-direction: column; flex-direction: column;

273
pages/nearby/components/one.vue
View File

@@ -1,6 +1,11 @@
<template> <template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom"> <view class="nearby-container">
<view class="nearby-map" @touchmove.stop.prevent> <!-- 地图区域 - 可折叠 -->
<view
class="nearby-map"
@touchmove.stop.prevent
:class="{ 'map-collapsed': isMapCollapsed }"
>
<map <map
style="width: 100%; height: 400px" style="width: 100%; height: 400px"
:latitude="latitudeVal" :latitude="latitudeVal"
@@ -22,71 +27,79 @@
</view> </view>
</view> </view>
</transition> </transition>
<!-- <view class="select-list" v-show="!rangeShow">
<view class="list-item" v-for="(item, index) in range">{{ item }}km</view>
</view> -->
</view> </view>
</view> </view>
<view class="nearby-list"> <!-- 筛选条件 - 固定显示 -->
<view class="nav-filter" @touchmove.stop.prevent> <view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top"> <view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll"> <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left"> <view class="jobs-left">
<view
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">
<view <view
class="button-click filterbtm" class="job button-click"
:class="{ active: pageState.search.order === item.value }" :class="{ active: state.tabIndex === 'all' }"
v-for="item in rangeOptions" @click="choosePosition('all')"
@click="handelHostestSearch(item)"
:key="item.value"
> >
{{ item.text }} 全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view> </view>
</view> </view>
<view class="btm-right button-click" @click="openFilter"> </scroll-view>
筛选 <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image> <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
</view> <text>添加</text>
</view> </view>
</view> </view>
<view class="one-cards"> <view class="filter-bottom">
<renderJobs <view class="btm-left">
v-if="list.length" <view
:list="list" class="button-click filterbtm"
:longitude="longitudeVal" :class="{ active: pageState.search.order === item.value }"
:latitude="latitudeVal" v-for="item in rangeOptions"
></renderJobs> @click="handelHostestSearch(item)"
<empty v-else pdTop="60"></empty> :key="item.value"
<loadmore ref="loadmoreRef"></loadmore> >
{{ item.text }}
</view>
</view>
<view class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view>
</view> </view>
</view> </view>
<!-- 列表滚动区域 -->
<scroll-view
:scroll-y="true"
class="nearby-scroll"
@scrolltolower="scrollBottom"
lower-threshold="50"
ref="scrollViewRef"
@scroll="handleScroll"
>
<view class="nearby-list">
<view class="one-cards">
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
</scroll-view>
<!-- 筛选 --> <!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter> <select-filter ref="selectFilterModel"></select-filter>
</scroll-view> </view>
</template> </template>
<script setup> <script setup>
@@ -107,6 +120,8 @@ const range = ref([1, 2, 4, 6, 8, 10]);
const rangeShow = ref(false); const rangeShow = ref(false);
const selectFilterModel = ref(null); const selectFilterModel = ref(null);
const scrollViewRef = ref(null);
const isMapCollapsed = ref(false);
const tMap = ref(); const tMap = ref();
const progress = ref(); const progress = ref();
const mapCovers = ref([]); const mapCovers = ref([]);
@@ -264,6 +279,13 @@ function progressChange(value) {
debounceAjax('refresh'); debounceAjax('refresh');
} }
// 处理滚动事件，实现地图折叠
function handleScroll(e) {
const scrollTop = e.detail.scrollTop;
// 当滚动超过100rpx时，折叠地图
isMapCollapsed.value = scrollTop > 100;
}
let debounceAjax = debounce(getJobList, 500); let debounceAjax = debounce(getJobList, 500);
function getJobList(type = 'add') { function getJobList(type = 'add') {
if (type === 'add' && pageState.page < pageState.maxPage) { if (type === 'add' && pageState.page < pageState.maxPage) {
@@ -363,78 +385,97 @@ defineExpose({ loadData, handleFilterConfirm });
} }
} }
} }
.nearby-scroll .nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
.nearby-map
height: 767rpx; .nearby-map
background: #e8e8e8; height: 767rpx;
overflow: hidden background: #e8e8e8;
overflow: hidden
transition: height 0.3s ease;
&.map-collapsed {
height: 0;
overflow: hidden;
}
.nearby-scroll
// 使用flex布局让scroll-view自适应高度，占据剩余空间
flex: 1;
overflow: hidden;
transition: flex 0.3s ease;
.nearby-list .nearby-list
.one-cards{ .one-cards{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 20rpx 20rpx 20rpx; padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4 background: #f4f4f4
height: 100%
} }
.nav-filter
padding: 16rpx 28rpx 0 28rpx // 筛选条件样式 - 顶级选择器
.filter-top .nav-filter
display: flex padding: 16rpx 28rpx 0 28rpx
justify-content: space-between; background: #ffffff
.tab-scroll .filter-top
flex: 1; display: flex
overflow: hidden; justify-content: space-between;
margin-right: 20rpx .tab-scroll
white-space: nowrap; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: clip; margin-right: 20rpx
-webkit-mask-image: linear-gradient(to right, black 60%, transparent); white-space: nowrap;
mask-image: linear-gradient(to right, black 60%, transparent); overflow: hidden;
.jobs-left text-overflow: clip;
display: flex -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
flex-wrap: nowrap mask-image: linear-gradient(to right, black 60%, transparent);
.job .jobs-left
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex display: flex
align-items: center; flex-wrap: nowrap
justify-content: center; .job
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
line-height: 38rpx;
.filter-bottom
display: flex
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #666D7F; color: #666D7F;
line-height: 38rpx; margin-right: 40rpx
.filter-bottom .active
display: flex font-weight: 500;
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #256BFA;
.btm-right
font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #6C7282; color: #256BFA;
.right-sx .btm-right
width: 26rpx; font-weight: 400;
height: 26rpx; font-size: 32rpx;
.active color: #6C7282;
transform: rotate(180deg) .right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
</style> </style>

231
pages/nearby/components/three.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom"> <view class="nearby-container">
<view class="three-head" @touchmove.stop.prevent> <view class="three-head" @touchmove.stop.prevent>
<view class="one-picker"> <view class="one-picker">
<view class="oneleft button-click" @click="openFilterSubway"> <view class="oneleft button-click" @click="openFilterSubway">
@@ -48,66 +48,69 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<view class="nearby-list"> <!-- 筛选项移到scroll-view外面 -->
<view class="nav-filter" @touchmove.stop.prevent> <view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top"> <view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll"> <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left"> <view class="jobs-left">
<view
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">
<view <view
class="button-click filterbtm" class="job button-click"
:class="{ active: pageState.search.order === item.value }" :class="{ active: state.tabIndex === 'all' }"
v-for="item in rangeOptions" @click="choosePosition('all')"
@click="handelHostestSearch(item)"
:key="item.value"
> >
{{ item.text }} 全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view> </view>
</view> </view>
<view class="btm-right button-click" @click="openFilter"> </scroll-view>
筛选 <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image> <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
</view> <text>添加</text>
</view> </view>
</view> </view>
<view class="one-cards"> <view class="filter-bottom">
<renderJobs <view class="btm-left">
v-if="list.length" <view
:list="list" class="button-click filterbtm"
:longitude="longitudeVal" :class="{ active: pageState.search.order === item.value }"
:latitude="latitudeVal" v-for="item in rangeOptions"
></renderJobs> @click="handelHostestSearch(item)"
<empty v-else pdTop="60"></empty> :key="item.value"
<loadmore ref="loadmoreRef"></loadmore> >
{{ item.text }}
</view>
</view>
<view class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view>
</view> </view>
</view> </view>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
<view class="nearby-list">
<view class="one-cards">
<renderJobs
v-if="list.length"
:list="list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
</scroll-view>
<!-- 筛选 --> <!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter> <select-filter ref="selectFilterModel"></select-filter>
</scroll-view> </view>
</template> </template>
<script setup> <script setup>
@@ -358,9 +361,18 @@ defineExpose({ loadData, handleFilterConfirm });
transform: rotate(180deg) transform: rotate(180deg)
.tabchecked .tabchecked
color: #4778EC !important; color: #4778EC !important;
.nearby-container
// 确保容器占据整个可用高度
height: 100%;
display: flex;
flex-direction: column;
.nearby-scroll .nearby-scroll
overflow: hidden; // 为scroll-view设置明确高度，减去nav-filter的高度
.three-head height: calc(100vh - var(--window-top) - var(--status-bar-height) - 63rpx - 200rpx - 120rpx);
.three-head
margin: 24rpx 0 0 0; margin: 24rpx 0 0 0;
padding: 26rpx 0 0 0; padding: 26rpx 0 0 0;
border-radius: 17rpx 17rpx 17rpx 17rpx; border-radius: 17rpx 17rpx 17rpx 17rpx;
@@ -482,71 +494,72 @@ defineExpose({ loadData, handleFilterConfirm });
border-radius: 17rpx 17rpx 17rpx 17rpx; border-radius: 17rpx 17rpx 17rpx 17rpx;
z-index: 1; z-index: 1;
.nearby-list .nearby-list
border-top: 2rpx solid #EBEBEB;
.one-cards{ .one-cards{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 20rpx 20rpx 20rpx; padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4 background: #f4f4f4
} }
.nav-filter .nav-filter
padding: 16rpx 28rpx 0 28rpx border-top: 2rpx solid #EBEBEB;
.filter-top padding: 16rpx 28rpx 0 28rpx;
display: flex margin-top: 125rpx;
justify-content: space-between; .filter-top
.tab-scroll display: flex
flex: 1; justify-content: space-between;
overflow: hidden; .tab-scroll
margin-right: 20rpx flex: 1;
white-space: nowrap; overflow: hidden;
overflow: hidden; margin-right: 20rpx
text-overflow: clip; white-space: nowrap;
-webkit-mask-image: linear-gradient(to right, black 60%, transparent); overflow: hidden;
mask-image: linear-gradient(to right, black 60%, transparent); text-overflow: clip;
.jobs-left -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
display: flex mask-image: linear-gradient(to right, black 60%, transparent);
flex-wrap: nowrap .jobs-left
.job
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex display: flex
align-items: center; flex-wrap: nowrap
justify-content: center; .job
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
line-height: 38rpx;
.filter-bottom
display: flex
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #666D7F; color: #666D7F;
line-height: 38rpx; margin-right: 40rpx
.filter-bottom .active
display: flex font-weight: 500;
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #256BFA;
.btm-right
font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #6C7282; color: #256BFA;
.right-sx .btm-right
width: 26rpx; font-weight: 400;
height: 26rpx; font-size: 32rpx;
.active color: #6C7282;
transform: rotate(180deg) .right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
</style> </style>

264
pages/nearby/components/two.vue
View File

@@ -1,6 +1,10 @@
<template> <template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom"> <view class="nearby-container">
<view class="two-head"> <!-- 区县选择区域 - 可折叠 -->
<view
class="two-head"
:class="{ 'area-collapsed': isAreaCollapsed }"
>
<view <view
class="head-item" class="head-item"
:class="{ active: item.value === fromValue.area }" :class="{ active: item.value === fromValue.area }"
@@ -18,66 +22,72 @@
不限区域 不限区域
</view> </view>
</view> </view>
<view class="nearby-list"> <!-- 筛选条件 - 固定显示 -->
<view class="nav-filter" @touchmove.stop.prevent> <view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top"> <view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll"> <scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left"> <view class="jobs-left">
<view
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
<view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
<text>添加</text>
</view>
</view>
<view class="filter-bottom">
<view class="btm-left">
<view <view
class="button-click filterbtm" class="job button-click"
:class="{ active: pageState.search.order === item.value }" :class="{ active: state.tabIndex === 'all' }"
v-for="item in rangeOptions" @click="choosePosition('all')"
@click="handelHostestSearch(item)"
:key="item.value"
> >
{{ item.text }} 全部
</view>
<view
class="job button-click"
:class="{ active: state.tabIndex === index }"
v-for="(item, index) in userInfo.jobTitle"
:key="index"
@click="choosePosition(index)"
>
{{ item }}
</view> </view>
</view> </view>
<view class="btm-right button-click" @click="openFilter"> </scroll-view>
筛选 <view class="jobs-add button-click" @click="navTo('/packageA/pages/addPosition/addPosition')">
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image> <uni-icons class="iconsearch" color="#666D7F" type="plusempty" size="18"></uni-icons>
</view> <text>添加</text>
</view> </view>
</view> </view>
<view class="one-cards"> <view class="filter-bottom">
<renderJobs <view class="btm-left">
v-if="list.length" <view
:list="list" class="button-click filterbtm"
:longitude="longitudeVal" :class="{ active: pageState.search.order === item.value }"
:latitude="latitudeVal" v-for="item in rangeOptions"
></renderJobs> @click="handelHostestSearch(item)"
<empty v-else pdTop="60"></empty> :key="item.value"
<loadmore ref="loadmoreRef"></loadmore> >
{{ item.text }}
</view>
</view>
<view class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</view>
</view> </view>
</view> </view>
<!-- 列表滚动区域 -->
<scroll-view
:scroll-y="true"
class="nearby-scroll"
@scrolltolower="scrollBottom"
lower-threshold="50"
ref="scrollViewRef"
@scroll="handleScroll"
>
<view class="nearby-list">
<view class="one-cards">
<renderJobs v-if="list.length" :list="list"></renderJobs>
<empty v-else pdTop="60"></empty>
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
</scroll-view>
<!-- 筛选 --> <!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter> <select-filter ref="selectFilterModel"></select-filter>
</scroll-view> </view>
</template> </template>
<script setup> <script setup>
@@ -103,6 +113,8 @@ const state = reactive({
const isLoaded = ref(false); const isLoaded = ref(false);
const showFilter = ref(false); const showFilter = ref(false);
const selectFilterModel = ref(); const selectFilterModel = ref();
const scrollViewRef = ref(null);
const isAreaCollapsed = ref(false);
const fromValue = reactive({ const fromValue = reactive({
area: 0, area: 0,
}); });
@@ -192,8 +204,20 @@ function scrollBottom() {
// } // }
function changeArea(area, item) { function changeArea(area, item) {
fromValue.area = area; fromValue.area = area;
// 切换区县时列表置顶
if (scrollViewRef.value) {
scrollViewRef.value.scrollTop = 0;
}
getJobList('refresh'); getJobList('refresh');
} }
// 处理滚动事件，实现区县选择区域折叠
function handleScroll(e) {
const scrollTop = e.detail.scrollTop;
// 当滚动超过100rpx时，折叠区县选择区域
isAreaCollapsed.value = scrollTop > 100;
console.log('scrollTop:', scrollTop, 'collapsed:', isAreaCollapsed.value);
}
function getJobList(type = 'add') { function getJobList(type = 'add') {
if (type === 'add' && pageState.page < pageState.maxPage) { if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1; pageState.page += 1;
@@ -254,13 +278,32 @@ defineExpose({ loadData, handleFilterConfirm });
<style lang="stylus" scoped> <style lang="stylus" scoped>
.tabchecked .tabchecked
color: #4778EC !important color: #4778EC !important
.nearby-scroll
.nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
.two-head
.nearby-scroll
// 使用flex布局让scroll-view自适应高度，占据剩余空间
flex: 1;
overflow: hidden;
.two-head
margin: 22rpx; margin: 22rpx;
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap
// grid-template-columns: repeat(4, 1fr); // grid-template-columns: repeat(4, 1fr);
transition: all 0.3s ease;
&.area-collapsed {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
// grid-column-gap: 10rpx; // grid-column-gap: 10rpx;
// grid-row-gap: 24rpx; // grid-row-gap: 24rpx;
@@ -291,64 +334,67 @@ defineExpose({ loadData, handleFilterConfirm });
padding: 0 20rpx 20rpx 20rpx; padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4 background: #f4f4f4
} }
.nav-filter
padding: 16rpx 28rpx 0 28rpx // 筛选条件样式 - 顶级选择器
.filter-top .nav-filter
display: flex padding: 16rpx 28rpx 0 28rpx
justify-content: space-between; background: #ffffff
.tab-scroll .filter-top
flex: 1; display: flex
overflow: hidden; justify-content: space-between;
margin-right: 20rpx .tab-scroll
white-space: nowrap; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: clip; margin-right: 20rpx
-webkit-mask-image: linear-gradient(to right, black 60%, transparent); white-space: nowrap;
mask-image: linear-gradient(to right, black 60%, transparent); overflow: hidden;
.jobs-left text-overflow: clip;
display: flex -webkit-mask-image: linear-gradient(to right, black 60%, transparent);
flex-wrap: nowrap mask-image: linear-gradient(to right, black 60%, transparent);
.job .jobs-left
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex display: flex
align-items: center; flex-wrap: nowrap
justify-content: center; .job
font-weight: 400;
font-size: 36rpx;
color: #666D7F;
margin-right: 32rpx;
white-space: nowrap
.active
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
font-weight: 500;
font-size: 36rpx;
color: #000000;
.jobs-add
display: flex
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
line-height: 38rpx;
.filter-bottom
display: flex
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400; font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #666D7F; color: #666D7F;
line-height: 38rpx; margin-right: 40rpx
.filter-bottom .active
display: flex font-weight: 500;
justify-content: space-between
padding: 24rpx 0
.btm-left
display: flex
.filterbtm
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #256BFA;
.btm-right
font-weight: 400;
font-size: 32rpx; font-size: 32rpx;
color: #6C7282; color: #256BFA;
.right-sx .btm-right
width: 26rpx; font-weight: 400;
height: 26rpx; font-size: 32rpx;
.active color: #6C7282;
transform: rotate(180deg) .right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
</style> </style>

1
pages/nearby/nearby.vue
View File

@@ -132,4 +132,5 @@ image {
.swiper-item .swiper-item
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
</style> </style>