FIX

修复首页筛选部分问题

miniprogram/pages/main/main.js

@@ -121,13 +121,23 @@ Page({
     }
   },
 
+  toggleEmpty: function (e) {
+    if (!this.data.toggleEnable) {
+      return
+    }
+    const currentList = this.data.filterList
+    if (currentList !== 0) {
+      this.hideList(currentList)
+    }
+  },
+
   toggleFilterItem: function (e) {
     if (!this.data.toggleEnable) {
       return
     }
     const currentList = this.data.filterList
-    this.hideList(currentList)
     const item = e.currentTarget.dataset.filterItem
+    this.hideList(currentList)
     this.data.filterItem[currentList] = this.data.filterItem[currentList] === item ? '' : item;
     this.setData({
       filterItem: this.data.filterItem

miniprogram/pages/main/main.wxml

@@ -2,61 +2,63 @@
 <!-- 更新了filter中的活动内容，但是由于有二级标题、还未给出页面美化需求，因此仅在js文件中更新，wxml未更新完全-->
 <view class="page">
   <view class="filter">
-    <view class="filter-item secondary-text-color" data-filter-list="{{1}}" bindtap="toggleFilterList">
+    <view class="filter-item secondary-text-color" data-filter-list="{{1}}" catchtap="toggleFilterList">
       <text>{{filterItem[1] === '' ? filterName[1].title : filterItem[1]}}</text>
       <image class="filter-arrow" id="arrow1" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
     <view class="filter-line"></view>
-    <view class="filter-item secondary-text-color" data-filter-list="{{2}}" bindtap="toggleFilterList">
+    <view class="filter-item secondary-text-color" data-filter-list="{{2}}" catchtap="toggleFilterList">
       <text>{{filterItem[2] === '' ? filterName[2].title : filterItem[2]}}</text>
       <image class="filter-arrow" id="arrow2" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
     <view class="filter-line"></view>
-    <view class="filter-item secondary-text-color" data-filter-list="{{3}}" bindtap="toggleFilterList">
+    <view class="filter-item secondary-text-color" data-filter-list="{{3}}" catchtap="toggleFilterList">
       <text>{{filterItem[3] === '' ? filterName[3].title : filterItem[3]}}</text>
       <image class="filter-arrow" id="arrow3" mode="aspectFit" src="/images/arrow.png"></image>
     </view>
   </view>
-  <view class="filter-lists">
-    <view wx:if="{{filterList === 1 || tempFilterList === 1}}" class="filter-list" id="list1">
-      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
-          wx:if="{{filterItem[1] === ''}}">✔</view>
-      </view>
-      <view wx:for="{{filterName[1].children}}" wx:for-item="item" wx:key="title">
-        <view class="filter-list-title primary-text-color">{{item.title}}</view>
-        <view wx:for="{{item.children}}" wx:for-item="item" wx:key="title">
-          <view wx:if="{{!item.children}}" class="filter-list-item secondary-text-color" data-filter-item="{{item}}"
-            bindtap="toggleFilterItem">{{item}}<view wx:if="{{filterItem[1] === item}}">✔</view>
-          </view>
-          <view wx:if="{{item.children}}" class="filter-list-subtitle primary-text-color">{{item.title}}</view>
-          <view class="filter-list-item secondary-text-color" wx:for="{{item.children}}" wx:for-item="title"
-            wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}
-            <view wx:if="{{filterItem[1] === title}}">✔</view>
+  <view wx:if="{{filterList || tempFilterList}}" class="filter-block" catchtap="toggleEmpty">
+    <view class="filter-lists">
+      <view wx:if="{{filterList === 1 || tempFilterList === 1}}" class="filter-list" id="list1">
+        <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" catchtap="toggleFilterItem">全部
+          <view wx:if="{{!filterItem[1]}}">✔</view>
+        </view>
+        <view wx:for="{{filterName[1].children}}" wx:for-item="item" wx:key="title">
+          <view class="filter-list-title primary-text-color">{{item.title}}</view>
+          <view wx:for="{{item.children}}" wx:for-item="item" wx:key="title">
+            <view wx:if="{{!item.children}}" class="filter-list-item secondary-text-color" data-filter-item="{{item}}"
+              catchtap="toggleFilterItem">{{item}}<view wx:if="{{filterItem[1] === item}}">✔</view>
+            </view>
+            <view wx:if="{{item.children}}" class="filter-list-subtitle primary-text-color">{{item.title}}</view>
+            <view class="filter-list-item secondary-text-color" wx:for="{{item.children}}" wx:for-item="title"
+              wx:key="*this" data-filter-item="{{title}}" catchtap="toggleFilterItem">{{title}}
+              <view wx:if="{{filterItem[1] === title}}">✔</view>
+            </view>
           </view>
         </view>
       </view>
-    </view>
-    <view wx:if="{{!(filterList === 1 && tempFilterList === 2 || filterList === 2 && tempFilterList === 1)}}"
-      class="filter-list"></view>
-    <view wx:if="{{filterList === 2 || tempFilterList === 2}}" class="filter-list" id="list2">
-      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
-          wx:if="{{filterItem[2] === ''}}">✔</view>
-      </view>
-      <view class="filter-list-item secondary-text-color" wx:for="{{filterName[2].children}}" wx:for-item="title"
-        wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
-          wx:if="{{filterItem[2] === title}}">✔</view>
-      </view>
-    </view>
-    <view
-      wx:if="{{!(filterList === 2 && tempFilterList === 3 || filterList === 3 && tempFilterList === 2) && !(filterList === 1 && tempFilterList === 3 || filterList === 3 && tempFilterList === 1)}}"
-      class="filter-list"></view>
-    <view wx:if="{{filterList === 3 || tempFilterList === 3}}" class="filter-list" id="list3">
-      <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" bindtap="toggleFilterItem">全部<view
-          wx:if="{{filterItem[3] === ''}}">✔</view>
+      <view wx:if="{{!(filterList === 1 && tempFilterList === 2 || filterList === 2 && tempFilterList === 1)}}"
+        class="filter-list"></view>
+      <view wx:if="{{filterList === 2 || tempFilterList === 2}}" class="filter-list" id="list2">
+        <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" catchtap="toggleFilterItem">全部
+          <view wx:if="{{!filterItem[2]}}">✔</view>
+        </view>
+        <view class="filter-list-item secondary-text-color" wx:for="{{filterName[2].children}}" wx:for-item="title"
+          wx:key="*this" data-filter-item="{{title}}" catchtap="toggleFilterItem">{{title}}<view
+            wx:if="{{filterItem[2] === title}}">✔</view>
+        </view>
       </view>
-      <view class="filter-list-item secondary-text-color" wx:for="{{filterName[3].children}}" wx:for-item="title"
-        wx:key="*this" data-filter-item="{{title}}" bindtap="toggleFilterItem">{{title}}<view
-          wx:if="{{filterItem[3] === title}}">✔</view>
+      <view
+        wx:if="{{!(filterList === 2 && tempFilterList === 3 || filterList === 3 && tempFilterList === 2) && !(filterList === 1 && tempFilterList === 3 || filterList === 3 && tempFilterList === 1)}}"
+        class="filter-list"></view>
+      <view wx:if="{{filterList === 3 || tempFilterList === 3}}" class="filter-list" id="list3">
+        <view class="filter-list-item secondary-text-color" data-filter-item="{{''}}" catchtap="toggleFilterItem">全部
+          <view wx:if="{{!filterItem[3]}}">✔</view>
+        </view>
+        <view class="filter-list-item secondary-text-color" wx:for="{{filterName[3].children}}" wx:for-item="title"
+          wx:key="*this" data-filter-item="{{title}}" catchtap="toggleFilterItem">{{title}}<view
+            wx:if="{{filterItem[3] === title}}">✔</view>
+        </view>
       </view>
     </view>
   </view>

miniprogram/pages/main/main.wxss

@@ -37,21 +37,24 @@
   box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.16);
 }
 
-.filter-lists {
+.filter-block {
   position: fixed;
   top: 60rpx;
+  bottom: 0rpx;
   left: 0rpx;
+  right: 0rpx;
+  z-index: 2;
+}
+
+.filter-lists {
   display: flex;
   justify-content: space-around;
   align-items: flex-start;
-  width: 100%;
-  z-index: 100;
 }
 
 .filter-list {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   width: 33%;
   max-height: 500rpx;
   overflow-y: scroll;