feat: 调整list view示例兼容web端

pages.json

@@ -1107,15 +1107,21 @@
     {
       "path": "pages/template/long-list/long-list",
       "style": {
-        "navigationBarTitleText": "顶部搜索框随时下移长列表",
+        "navigationBarTitleText": "顶部搜索框随时下移长列表"
+        // #ifdef APP
+        ,
         "enablePullDownRefresh": true
+        // #endif
       }
     },
     {
       "path": "pages/template/long-list2/long-list2",
       "style": {
-        "navigationBarTitleText": "顶部banner长列表",
+        "navigationBarTitleText": "顶部banner长列表"
+        // #ifdef APP
+        ,
         "enablePullDownRefresh": true
+        // #endif
       }
     },
     {

pages/component/list-view/list-view-multiplex-input.uvue

@@ -5,7 +5,7 @@
 	<list-view v-show="list_show" id="listview" style="flex: 1;" show-scrollbar=false @scrolltolower="onScrollTolower">
     <list-item v-for="index in item_count" class="item" @click="itemClick(index)">
       <text >item-------<text>{{index}}</text></text>
-      <input style="border-width: 1px; border-style: solid;" :placeholder="index" :value= "index ==1 ? `第一个` :index "/>
+      <input style="border-width: 1px; border-style: solid;" :placeholder="index + ''" :value= "index ==1 ? `第一个` :index "/>
     </list-item>
   </list-view>
 </template>
@@ -46,7 +46,7 @@
 <style>
   .item {
     padding: 15px;
-    margin: 5px 0;
+    margin: 0 0 5px 0;
     background-color: #fff;
     border-radius: 5px;
   }

pages/component/list-view/list-view-multiplex.uvue

@@ -55,7 +55,7 @@
 <style>
   .item {
     padding: 15px;
-    margin: 5px 0;
+    margin: 0 0 5px 0;
     background-color: #fff;
     border-radius: 5px;
   }

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

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  const SERVER_URL = "https://ext.dcloud.net.cn/plugin/uniappx-plugin-list"
+  const SERVER_URL = "https://unidemo.dcloud.net.cn/plugin/uniappx-plugin-list"
   const PAGE_SIZE = 10; // 最大值 10
 
   type ListItem = {
@@ -241,4 +241,7 @@
     align-items: center;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
 </style>

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

@@ -78,7 +78,7 @@
             preload: false
           } as SwiperViewItem
         ] as SwiperViewItem[],
-        swiperIndex: -1,
+        swiperIndex: 0,
         pageScrollView: null as null | UniElement,
         headerHeight: 0,
         animationFinishIndex: 0,
@@ -95,7 +95,7 @@
       this.tabScrollView = this.$refs['tabScroll'] as UniElement
       this.indicatorNode = this.$refs['indicator'] as UniElement
       this.cacheTabItemsSize()
-      this.setSwiperIndex(0, true)
+      this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
     },
     onPullDownRefresh() {
       (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
@@ -261,6 +261,10 @@
     background-color: #007AFF;
   }
 
+  .swiper-list {
+    flex: 1;
+  }
+
   .swiper-view {
     flex: 1;
   }

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

@@ -88,7 +88,7 @@
             preload: false
           } as SwiperViewItem
         ] as SwiperViewItem[],
-        swiperIndex: -1,
+        swiperIndex: 0,
         pageScrollView: null as null | UniElement,
         headerHeight: 0,
         animationFinishIndex: 0,
@@ -106,7 +106,7 @@
       this.tabScrollView = this.$refs['tabScroll'] as UniElement
       this.indicatorNode = this.$refs['indicator'] as UniElement
       this.cacheTabItemsSize()
-      this.setSwiperIndex(0, true)
+      this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
     },
     onPullDownRefresh() {
       (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
@@ -265,6 +265,10 @@
     background-color: #007AFF;
   }
 
+  .swiper-list {
+    flex: 1;
+  }
+
   .swiper-view {
     flex: 1;
   }