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

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

@@ -1,5 +1,5 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="nearby-container">
<view class="two-head">
<view
class="head-item"
@@ -11,6 +11,7 @@
{{ item.commercialAreaName }}
</view>
</view>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom" lower-threshold="50">
<view class="nearby-list">
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
@@ -68,9 +69,10 @@
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
</scroll-view>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</view>
</template>
<script setup>
@@ -273,9 +275,20 @@ defineExpose({ loadData, handleFilterConfirm });
<style lang="stylus" scoped>
.tabchecked
color: #4778EC !important
.nearby-scroll
.nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden;
.two-head
.nearby-scroll
// 使用flex布局让scroll-view自适应高度，占据剩余空间
flex: 1;
overflow: hidden;
.two-head
margin: 22rpx;
display: flex;
flex-wrap: wrap
@@ -303,7 +316,6 @@ defineExpose({ loadData, handleFilterConfirm });
border-radius: 12rpx 12rpx 12rpx 12rpx;
.nearby-list
border-top: 2rpx solid #EBEBEB;
height: 100%
.one-cards{
display: flex;
flex-direction: column;

63
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,12 +27,9 @@
</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">
@@ -73,6 +75,16 @@
</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"
@@ -84,9 +96,10 @@
<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,22 +385,41 @@ defineExpose({ loadData, handleFilterConfirm });
}
}
}
.nearby-scroll
.nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden;
.nearby-map
.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
// 筛选条件样式 - 顶级选择器
.nav-filter
padding: 16rpx 28rpx 0 28rpx
background: #ffffff
.filter-top
display: flex
justify-content: space-between;

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

@@ -1,5 +1,5 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="nearby-container">
<view class="three-head" @touchmove.stop.prevent>
<view class="one-picker">
<view class="oneleft button-click" @click="openFilterSubway">
@@ -48,7 +48,7 @@
</view>
</scroll-view>
</view>
<view class="nearby-list">
<!-- 筛选项移到scroll-view外面 -->
<view class="nav-filter" @touchmove.stop.prevent>
<view class="filter-top">
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
@@ -94,6 +94,8 @@
</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"
@@ -105,9 +107,10 @@
<loadmore ref="loadmoreRef"></loadmore>
</view>
</view>
</scroll-view>
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
</scroll-view>
</view>
</template>
<script setup>
@@ -358,9 +361,18 @@ defineExpose({ loadData, handleFilterConfirm });
transform: rotate(180deg)
.tabchecked
color: #4778EC !important;
.nearby-container
// 确保容器占据整个可用高度
height: 100%;
display: flex;
flex-direction: column;
.nearby-scroll
overflow: hidden;
.three-head
// 为scroll-view设置明确高度，减去nav-filter的高度
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 63rpx - 200rpx - 120rpx);
.three-head
margin: 24rpx 0 0 0;
padding: 26rpx 0 0 0;
border-radius: 17rpx 17rpx 17rpx 17rpx;
@@ -482,15 +494,16 @@ defineExpose({ loadData, handleFilterConfirm });
border-radius: 17rpx 17rpx 17rpx 17rpx;
z-index: 1;
.nearby-list
border-top: 2rpx solid #EBEBEB;
.one-cards{
display: flex;
flex-direction: column;
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
}
.nav-filter
padding: 16rpx 28rpx 0 28rpx
.nav-filter
border-top: 2rpx solid #EBEBEB;
padding: 16rpx 28rpx 0 28rpx;
margin-top: 125rpx;
.filter-top
display: flex
justify-content: space-between;

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

@@ -1,6 +1,10 @@
<template>
<scroll-view :scroll-y="true" class="nearby-scroll" @scrolltolower="scrollBottom">
<view class="two-head">
<view class="nearby-container">
<!-- 区县选择区域 - 可折叠 -->
<view
class="two-head"
:class="{ 'area-collapsed': isAreaCollapsed }"
>
<view
class="head-item"
:class="{ active: item.value === fromValue.area }"
@@ -18,7 +22,7 @@
不限区域
</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">
@@ -64,20 +68,26 @@
</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>
<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>
</scroll-view>
</view>
</template>
<script setup>
@@ -103,6 +113,8 @@ const state = reactive({
const isLoaded = ref(false);
const showFilter = ref(false);
const selectFilterModel = ref();
const scrollViewRef = ref(null);
const isAreaCollapsed = ref(false);
const fromValue = reactive({
area: 0,
});
@@ -192,8 +204,20 @@ function scrollBottom() {
// }
function changeArea(area, item) {
fromValue.area = area;
// 切换区县时列表置顶
if (scrollViewRef.value) {
scrollViewRef.value.scrollTop = 0;
}
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') {
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
@@ -254,13 +278,32 @@ defineExpose({ loadData, handleFilterConfirm });
<style lang="stylus" scoped>
.tabchecked
color: #4778EC !important
.nearby-scroll
.nearby-container
// 确保容器占据整个可用视口高度，包括安全区域
height: calc(100vh - var(--window-top));
display: flex;
flex-direction: column;
overflow: hidden;
.two-head
.nearby-scroll
// 使用flex布局让scroll-view自适应高度，占据剩余空间
flex: 1;
overflow: hidden;
.two-head
margin: 22rpx;
display: flex;
flex-wrap: wrap
// 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-row-gap: 24rpx;
@@ -291,8 +334,11 @@ defineExpose({ loadData, handleFilterConfirm });
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
}
.nav-filter
// 筛选条件样式 - 顶级选择器
.nav-filter
padding: 16rpx 28rpx 0 28rpx
background: #ffffff
.filter-top
display: flex
justify-content: space-between;

1
pages/nearby/nearby.vue
View File

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