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

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

@@ -1,6 +1,11 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="nearby-map" @touchmove.stop.prevent>
<view class="nearby-container">
<!-- 地图区域 - 可折叠 -->
<view
class="nearby-map"
@touchmove.stop.prevent
:class="{ 'map-collapsed': isMapCollapsed }"
>
<map
style="width: 100%; height: 400px"
:latitude="latitudeVal"
@@ -22,71 +27,79 @@
</view>
</view>
</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 class="nearby-list">
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<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 class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left">
<view
class="button-click filterbtm"
:class="{ active: pageState.search.order === item.value }"
v-for="item in rangeOptions"
@click="handelHostestSearch(item)"
:key="item.value"
class="job button-click"
:class="{ active: state.tabIndex === 'all' }"
@click="choosePosition('all')"
>
{{ 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 class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</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="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 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 class="btm-right button-click" @click="openFilter">
筛选
<image class="right-sx" :class="{ active: showFilter }" src="@/static/icon/shaixun.png"></image>
</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>
</scroll-view>
</view>
</template>
<script setup>
@@ -107,6 +120,8 @@ const range = ref([1, 2, 4, 6, 8, 10]);
const rangeShow = ref(false);
const selectFilterModel = ref(null);
const scrollViewRef = ref(null);
const isMapCollapsed = ref(false);
const tMap = ref();
const progress = ref();
const mapCovers = ref([]);
@@ -264,6 +279,13 @@ function progressChange(value) {
debounceAjax('refresh');
}
// 处理滚动事件，实现地图折叠
function handleScroll(e) {
const scrollTop = e.detail.scrollTop;
// 当滚动超过100rpx时，折叠地图
isMapCollapsed.value = scrollTop > 100;
}
let debounceAjax = debounce(getJobList, 500);
function getJobList(type = 'add') {
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;
.nearby-map
height: 767rpx;
background: #e8e8e8;
overflow: hidden
.nearby-map
height: 767rpx;
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
.one-cards{
display: flex;
flex-direction: column;
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
height: 100%
}
.nav-filter
padding: 16rpx 28rpx 0 28rpx
.filter-top
display: flex
justify-content: space-between;
.tab-scroll
flex: 1;
overflow: hidden;
margin-right: 20rpx
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
mask-image: linear-gradient(to right, black 60%, transparent);
.jobs-left
display: flex
flex-wrap: nowrap
.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
// 筛选条件样式 - 顶级选择器
.nav-filter
padding: 16rpx 28rpx 0 28rpx
background: #ffffff
.filter-top
display: flex
justify-content: space-between;
.tab-scroll
flex: 1;
overflow: hidden;
margin-right: 20rpx
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
-webkit-mask-image: linear-gradient(to right, black 60%, transparent);
mask-image: linear-gradient(to right, black 60%, transparent);
.jobs-left
display: flex
align-items: center;
justify-content: center;
flex-wrap: nowrap
.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-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-size: 32rpx;
color: #666D7F;
margin-right: 40rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #256BFA;
.btm-right
font-weight: 400;
margin-right: 40rpx
.active
font-weight: 500;
font-size: 32rpx;
color: #6C7282;
.right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
color: #256BFA;
.btm-right
font-weight: 400;
font-size: 32rpx;
color: #6C7282;
.right-sx
width: 26rpx;
height: 26rpx;
.active
transform: rotate(180deg)
</style>