Kaynağa Gözat

fix: 分账记录页修复scroll-view高度计算,改用flex布局自动填充

去掉固定高度计算和 scrollHeight ref,改用 height:100vh + flex 布局使
scroll-view 自动占满筛选栏下方的剩余空间,配合 lower-threshold 确保滚动加载触发。

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 2 hafta önce
ebeveyn
işleme
1ff26174c6
1 değiştirilmiş dosya ile 5 ekleme ve 5 silme
  1. 5 5
      admin-h5/src/pages/finance/split-record.vue

+ 5 - 5
admin-h5/src/pages/finance/split-record.vue

@@ -36,7 +36,7 @@
       class="split-scroll"
       scroll-y
       @scrolltolower="loadMore"
-      :style="{ height: scrollHeight + 'px' }">
+      lower-threshold="80">
       <view class="split-list" v-if="list.length > 0">
         <view class="split-item" v-for="(item, index) in list" :key="index">
           <view class="item-header">
@@ -111,7 +111,6 @@ const selectedStationId = ref('')
 const selectedStationName = ref('')
 const activeType = ref('')
 const activeTypeLabel = ref('')
-const scrollHeight = ref(600)
 
 const typeOptions = [
   { label: '全部类型', value: '' }
@@ -219,8 +218,6 @@ const handleSearch = () => {
 }
 
 onMounted(async () => {
-  const sysInfo = uni.getSystemInfoSync()
-  scrollHeight.value = sysInfo.windowHeight - 44 // 减去导航栏高度
   await loadDicts()
   loadStations()
   loadData()
@@ -229,17 +226,20 @@ onMounted(async () => {
 
 <style scoped>
 .split-container {
-  min-height: 100vh;
+  height: 100vh;
   background-color: #F5F7FA;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .split-scroll {
   flex: 1;
+  overflow: hidden;
 }
 
 .filter-section {
+  flex-shrink: 0;
   background-color: #FFFFFF;
   padding: 24rpx 20rpx 20rpx;
   margin-bottom: 16rpx;