init

pages/index/index.vue

@@ -31,6 +31,13 @@
           </view>
         </swiper>
       </view>
+      <view class="lable-select-content" :style="{ 'background-color': isScrollNumber >= 175 ? '#fff' : '#f5f6fa', 'box-shadow': isScrollNumber >= 175 ? '0px 8rpx 8rpx -8rpx rgba(0, 0, 0, 0.16)' : '' }">
+        <view class="lable-row" v-for="(item, index) in lableIsRows" :key="index">
+          <view :class="['lable-item', lable.isAct && 'item-active']" v-for="lable in item" :key="lable.key" @click="lableKeysHandler(lable)">
+            {{ lable.name }}
+          </view>
+        </view>
+      </view>
       <view class="content-ul">
         <view class="item-ul">
           <block v-for="(item, index) in newDataList" :key="index">
@@ -122,6 +129,33 @@ export default {
       showVideoPopUp: false, //
       videoPopListUp: {},
       isScrollNumber: 0,
+      dataListLable: [
+        {
+          name: "上拉加载更多",
+          key: 2,
+          isAct: false,
+        },
+        {
+          name: "加载中",
+          key: 3,
+          isAct: false,
+        },
+        {
+          name: "已经到底了",
+          key: 1,
+          isAct: false,
+        },
+        {
+          name: "正在下拉",
+          key: 5,
+          isAct: false,
+        },
+        {
+          name: "正在下拉1",
+          key: 51,
+          isAct: false,
+        },
+      ],
     };
   },
   computed: {
@@ -129,7 +163,25 @@ export default {
       return this.bannerDataList.length > 0 && this.isScrollNumber < 235;
     },
     bannerPosition() {
-      return this.bannerDataList.length > 0 ;
+      return this.bannerDataList.length > 0;
+    },
+    lableIsRows() {
+      const numTags = this.dataListLable.length;
+      const rows = [];
+
+      if (numTags <= 4) {
+        rows.push(this.dataListLable);
+      } else if (numTags > 4 && numTags <= 8) {
+        const firstRow = this.dataListLable.slice(0, 4);
+        const secondRow = this.dataListLable.slice(4);
+        rows.push(firstRow, secondRow);
+      } else if (numTags >= 9) {
+        const firstRow = this.dataListLable.filter((_, index) => index % 2 === 0);
+        const secondRow = this.dataListLable.filter((_, index) => index % 2 !== 0);
+        rows.push(firstRow, secondRow);
+      }
+
+      return rows;
     },
   },
   components: {
@@ -282,6 +334,15 @@ export default {
           });
       }
     },
+    lableKeysHandler(item) {
+      let actId = [];
+      item.isAct = !item.isAct;
+      this.lableIsRows.forEach((item) => {
+        item.forEach((_) => {
+          _.isAct && actId.push(_.key);
+        });
+      });
+    },
   },
   mounted() {
     uni.$on("updateNewList", (data) => {
@@ -466,5 +527,34 @@ export default {
       color: #3385ff;
     }
   }
+  .lable-select-content {
+    position: sticky;
+    left: 0;
+    top: 175rpx;
+    overflow: hidden;
+    overflow-x: auto;
+    width: 100%;
+    background-color: #fff;
+    padding: 10rpx 0 10rpx 20rpx;
+    z-index: 9;
+
+    .lable-row {
+      display: flex;
+    }
+    .lable-item {
+      flex-shrink: 0;
+      padding: 8rpx 40rpx;
+      background: #ffffff;
+      border: 1rpx solid #dcdfe6;
+      border-radius: 48rpx;
+      margin-right: 20rpx;
+      white-space: nowrap;
+      margin-top: 20rpx;
+    }
+    .item-active {
+      background: #3385ff;
+      color: #fff;
+    }
+  }
 }
 </style>