添加swiper

src/pages/my-growth.vue

@@ -70,66 +70,74 @@ const onPractiseLoading = async (page) => {
       </view>
     </view>
     <view class="contents">
-      <ScrollList :show="selectedIndex === 0" :onLoading="onMatchLoading">
+      <swiper
-        <view
+        :current="selectedIndex"
-          v-for="(item, index) in matchList"
+        @change="(e) => (selectedIndex = e.detail.current)"
-          :key="index"
+        :style="{ height: '100%' }"
-          @click="() => toMatchDetail(item.battleId)"
-        >
-          <view class="contest-header">
-            <text>{{ item.name }}</text>
-            <text>{{ item.createdAt }}</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-          <BattleHeader
-            :players="item.mode === 1 ? [] : item.players"
-            :blueTeam="item.bluePlayers"
-            :redTeam="item.redPlayers"
-            :winner="item.winner"
-            :showRank="item.mode === 2"
-            :showHeader="false"
-          />
-        </view>
-      </ScrollList>
-      <ScrollList :show="selectedIndex === 1" :onLoading="onBattleLoading">
-        <view
-          v-for="(item, index) in battleList"
-          :key="index"
-          @click="() => toMatchDetail(item.battleId)"
-        >
-          <view class="contest-header">
-            <text>{{ item.name }}</text>
-            <text>{{ item.createdAt }}</text>
-            <image src="../static/back.png" mode="widthFix" />
-          </view>
-          <BattleHeader
-            :players="item.mode === 1 ? [] : item.players"
-            :blueTeam="item.bluePlayers"
-            :redTeam="item.redPlayers"
-            :winner="item.winner"
-            :showRank="item.mode === 2"
-            :showHeader="false"
-          />
-        </view>
-      </ScrollList>
-      <ScrollList
-        :show="selectedIndex === 2"
-        :onLoading="onPractiseLoading"
-        :pageSize="15"
       >
-        <view
+        <swiper-item>
-          v-for="(item, index) in practiseList"
+          <ScrollList :onLoading="onMatchLoading">
-          :key="index"
+            <view
-          class="practice-record"
+              v-for="(item, index) in matchList"
-          @click="() => getPractiseDetail(item.id)"
+              :key="index"
-        >
+              @click="() => toMatchDetail(item.battleId)"
-          <text
+            >
-            >{{ item.completed_arrows === 36 ? "耐力挑战" : "单组练习" }}
+              <view class="contest-header">
-            {{ item.createdAt }}</text
+                <text>{{ item.name }}</text>
-          >
+                <text>{{ item.createdAt }}</text>
-          <image src="../static/back.png" mode="widthFix" />
+                <image src="../static/back.png" mode="widthFix" />
-        </view>
+              </view>
-      </ScrollList>
+              <BattleHeader
+                :players="item.mode === 1 ? [] : item.players"
+                :blueTeam="item.bluePlayers"
+                :redTeam="item.redPlayers"
+                :winner="item.winner"
+                :showRank="item.mode === 2"
+                :showHeader="false"
+              />
+            </view>
+          </ScrollList>
+        </swiper-item>
+        <swiper-item>
+          <ScrollList :onLoading="onBattleLoading">
+            <view
+              v-for="(item, index) in battleList"
+              :key="index"
+              @click="() => toMatchDetail(item.battleId)"
+            >
+              <view class="contest-header">
+                <text>{{ item.name }}</text>
+                <text>{{ item.createdAt }}</text>
+                <image src="../static/back.png" mode="widthFix" />
+              </view>
+              <BattleHeader
+                :players="item.mode === 1 ? [] : item.players"
+                :blueTeam="item.bluePlayers"
+                :redTeam="item.redPlayers"
+                :winner="item.winner"
+                :showRank="item.mode === 2"
+                :showHeader="false"
+              />
+            </view>
+          </ScrollList>
+        </swiper-item>
+        <swiper-item>
+          <ScrollList :onLoading="onPractiseLoading" :pageSize="15">
+            <view
+              v-for="(item, index) in practiseList"
+              :key="index"
+              class="practice-record"
+              @click="() => getPractiseDetail(item.id)"
+            >
+              <text
+                >{{ item.completed_arrows === 36 ? "耐力挑战" : "单组练习" }}
+                {{ item.createdAt }}</text
+              >
+              <image src="../static/back.png" mode="widthFix" />
+            </view>
+          </ScrollList>
+        </swiper-item>
+      </swiper>
     </view>
   </Container>
 </template>