Jelajahi Sumber

fix(diet): 食材查询适合/全部固定倒序(推荐值大的在前)、查询条件固定顶部、列表独立滚动

liaoxg 2 hari lalu
induk
melakukan
e38799526e
1 mengubah file dengan 11 tambahan dan 3 penghapusan
  1. 11 3
      cfc-frontend/pages/diet/food-query.vue

+ 11 - 3
cfc-frontend/pages/diet/food-query.vue

@@ -31,8 +31,7 @@
       </view>
     </view>
 
-    <scroll-view class="content" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
-      <!-- 搜索栏 -->
+    <!-- 搜索栏(固定顶部,不随列表滚动) -->
       <view class="search-bar">
         <input class="search-input" placeholder="搜索食材..." v-model="searchQuery" @confirm="searchFood" />
         <view class="search-btn" @tap="searchFood">搜索</view>
@@ -76,6 +75,8 @@
         </view>
       </view>
 
+      <!-- 列表区(仅此区域滚动) -->
+      <scroll-view class="content" scroll-y :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
       <!-- 家庭总览 -->
       <view class="family-overview" v-if="currentView === 'family' && familyOverview && familyOverview.length > 0">
         <view class="overview-title">
@@ -384,8 +385,11 @@ export default {
     },
     setFilter: function(type) {
       this.filterType = type
+      // 适合/全部:倒序,推荐值大的排前面;戒备:升序,推荐值小的排前面
       if (type === 'unsuitable') {
         this.sortType = 'asc'
+      } else {
+        this.sortType = 'desc'
       }
     },
     setSort: function(type) {
@@ -413,7 +417,8 @@ export default {
 
 <style scoped>
 .food-query-page {
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   background-color: #F5F7FA;
   display: flex;
   flex-direction: column;
@@ -490,7 +495,10 @@ export default {
 
 .content {
   flex: 1;
+  min-height: 0;
+  overflow: hidden;
   padding: 20rpx 30rpx;
+  box-sizing: border-box;
 }
 
 /* 分类标签 */