feat: web端开启long-list示例，调整swiper-list示例

pages.json

@@ -1103,8 +1103,7 @@
       "style": {
         "navigationBarTitleText": "半屏弹窗"
       }
-    },
-    // #ifdef APP
+    },
     {
       "path": "pages/template/long-list/long-list",
       "style": {
@@ -1118,8 +1117,7 @@
         "navigationBarTitleText": "顶部banner长列表",
         "enablePullDownRefresh": true
       }
-    },
-    // #endif
+    },
     {
       "path": "pages/template/pull-zoom-image/pull-zoom-image",
       "style": {

pages/tabBar/template.uvue

@@ -54,8 +54,7 @@
   export default {
     data() {
       return {
-        list: [
-          // #ifdef APP
+        list: [
           {
             id: 'long-list',
             url: 'long-list',
@@ -72,8 +71,7 @@
                 url: 'long-list2'
               },
             ] as Page[],
-          },
-          // #endif
+          },
           {
             id: 'list-news',
             url: 'list-news',

pages/template/long-list/long-list.uvue

@@ -7,7 +7,7 @@
     <view class="swiper-list">
       <scroll-view ref="tabScroll" class="swiper-tabs" direction="horizontal" :show-scrollbar="false">
         <view class="flex-row" style="align-self: flex-start;">
-          <text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
+          <text ref="swipertab" space="nbsp" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
             v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
             {{item.name}}
           </text>
@@ -209,7 +209,7 @@
 
         // 滚动到水平中心位置
         const scroll_x = x - this.swiperWidth / 2
-        if(this.tabScrollView !== null){
+        if(this.tabScrollView != null){
           this.tabScrollView!.scrollLeft = scroll_x
         }
       },
@@ -238,6 +238,9 @@
 
   .swiper-list {
     height: 100%;
+    /* #ifdef WEB */
+    flex: 1;
+    /* #endif */
   }
 
   .swiper-tabs {
@@ -249,6 +252,7 @@
     color: #555;
     font-size: 16px;
     padding: 12px 25px;
+    white-space: nowrap;
   }
 
   .swiper-tabs-item-active {

pages/template/long-list2/long-list2.uvue

@@ -165,7 +165,9 @@
         const percentage = Math.abs(current_offset_x) / this.swiperWidth
 
         // 通知更新指示线
-        this.updateTabIndicator(current_index, move_to_index, percentage)
+        if (current_index != move_to_index) {
+          this.updateTabIndicator(current_index, move_to_index, percentage)
+        }
 
         // 首次可见时初始化数据
         this.initSwiperItemData(move_to_index)
@@ -242,6 +244,9 @@
 
   .swiper-list {
     height: 100%;
+    /* #ifdef WEB */
+    flex: 1;
+    /* #endif */
   }
 
   .swiper-tabs {
@@ -253,6 +258,7 @@
     color: #555;
     font-size: 16px;
     padding: 12px 25px;
+    white-space: nowrap;
   }
 
   .swiper-tabs-item-active {

pages/template/swiper-list/swiper-list.uvue

@@ -191,6 +191,7 @@
     color: #555;
     font-size: 16px;
     padding: 12px 25px;
+    white-space: nowrap;
   }
 
   .swiper-tabs-item-active {

pages/template/swiper-list2/swiper-list2.uvue

@@ -143,6 +143,7 @@
     color: #555;
     font-size: 16px;
     margin: 15px 25px 5px 25px;
+    white-space: nowrap;
   }
 
   .swiper-tabs-item-active {