improvement: 选择题库页面滚动

src/pages/learn/selectCategory.vue

@@ -15,7 +15,17 @@
       :scroll-into-view="scrollId"
     >
       <view v-for="(items, key) in labels" :key="key" class="label-list">
-        <view v-for="(list, index) in items" :key="index" class="label-list">
+        <view
+          v-for="(list, index) in items"
+          :key="index"
+          class="label-list"
+          :style="{
+            'min-height':
+              key == secondKey && index + 1 == list.length
+                ? minHeight + 'px'
+                : 0,
+          }"
+        >
           <view class="label-title" :id="key + index">
             <!-- 品类title -->
             <view>{{
@@ -33,7 +43,7 @@
                     wide: key == secondKey,
                   },
                 ]"
-                @click="handleClick(key, ind, label)"
+                @click="handleClick(key, index, ind, label)"
               >
                 <text class="label-text">{{ label.name }}</text>
               </view>
@@ -67,6 +77,7 @@ export default {
       },
       tapLoading: true,
       scrollId: '',
+      minHeight: 0,
     }
   },
   computed: {
@@ -82,13 +93,26 @@ export default {
   },
   methods: {
     // 选中标签
-    handleClick(key, ind, label) {
+    handleClick(key, index, ind, label) {
       this.selected[key] = label
       if (key == key1) {
         // 选中一级标签
-        this.scrollId = key2 + ind
+        this.scrollId = ''
+        this.selected[key2] = {}
+        const query = uni.createSelectorQuery().in(this)
+        query
+          .select('.select-category-content')
+          .boundingClientRect((data) => {
+            this.minHeight = data.height - 22 // 去掉margin、padding
+            this.$nextTick(() => {
+              this.scrollId = key2 + ind
+              console.log(this.scrollId)
+            })
+          })
+          .exec()
       } else {
         // 选中二级标签
+        this.selected[key1] = this.labels[key1][0][index]
         this.setPageInfo(this.selected)
         this.$u.route({
           url: 'pages/learn/addExam',
@@ -200,7 +224,7 @@ export default {
   background-size: 100% 520rpx;
   background-repeat: no-repeat;
   .select-category-content {
-    padding: 0 0 30rpx 24rpx;
+    padding: 0 0 24rpx 24rpx;
     height: 100%;
     overflow: auto;
     position: relative;