feat: 放开web端list-view相关示例

pages.json

@@ -50,7 +50,6 @@
         "navigationBarTitleText": "swiper"
       }
     },
-    // #ifdef APP
     {
       "path": "pages/component/list-view/list-view",
       "style": {
@@ -63,6 +62,14 @@
         "navigationBarTitleText": "list-view-multiplex"
       }
     },
+    {
+      "path" : "pages/component/list-view/list-view-multiplex-input",
+      "style" :
+      {
+        "navigationBarTitleText" : "list-view复用input",
+        "enablePullDownRefresh" : false
+      }
+    },
     {
       "path": "pages/component/list-view/list-view-multiplex-video",
       "style": {
@@ -75,6 +82,7 @@
         "navigationBarTitleText": "list-view-children-in-slot"
       }
     },
+    // #ifdef APP
     {
       "path": "pages/component/sticky-section/sticky-section",
       "style": {
@@ -1032,8 +1040,7 @@
       "style": {
         "navigationBarTitleText": "模板"
       }
-    },
-    // #ifdef APP
+    },
     {
       "path": "pages/template/list-news/list-news",
       "style": {
@@ -1045,8 +1052,7 @@
       "style": {
         "navigationBarTitleText": "详情示例"
       }
-    },
-    // #endif
+    },
     {
       "path": "pages/template/drop-card/drop-card",
       "style": {
@@ -1097,8 +1103,7 @@
       "style": {
         "navigationBarTitleText": "半屏弹窗"
       }
-    },
-    // #ifdef APP
+    },
     {
       "path": "pages/template/long-list/long-list",
       "style": {
@@ -1112,8 +1117,7 @@
         "navigationBarTitleText": "顶部banner长列表",
         "enablePullDownRefresh": true
       }
-    },
-    // #endif
+    },
     {
       "path": "pages/template/pull-zoom-image/pull-zoom-image",
       "style": {
@@ -1190,14 +1194,6 @@
         "navigationBarTitleText": "权限申请监听",
         "enablePullDownRefresh": false
       }
-    },
-    {
-      "path" : "pages/component/list-view/list-view-multiplex-input",
-      "style" :
-      {
-        "navigationBarTitleText" : "list-view复用input",
-        "enablePullDownRefresh" : false
-      }
     }
     // #endif
   ],

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

@@ -43,7 +43,7 @@
         //延时显示list-view 测试list-item延时显示bug
         setTimeout(()=>{
           this.list_show = !this.list_show
-        }, 400)
+        }, 4000)
       },
       switchItemContent() {
         this.displayArrow = !this.displayArrow

pages/tabBar/component.uvue

@@ -77,11 +77,10 @@
                   enable: false
                 },
                 */
-              // #ifdef APP
-              // TODO web 实现list-view
               {
                 name: 'list-view',
               },
+              // #ifdef APP
               {
                 name: 'sticky-header',
               },

pages/tabBar/template.uvue

@@ -54,8 +54,7 @@
   export default {
     data() {
       return {
-        list: [
-          // #ifdef APP
+        list: [
           {
             id: 'long-list',
             url: 'long-list',
@@ -79,8 +78,7 @@
             name: '列表到详情',
             open: false,
             pages: [] as Page[],
-          },
-          // #endif
+          },
           {
             id: 'scroll-fold-nav',
             url: 'scroll-fold-nav',

pages/template/list-news/list-news.uvue

@@ -4,7 +4,8 @@
     <list-item class="banner" @click="bannerClick(banner)" type=1>
       <image class="banner-img" :src="banner.cover"></image>
       <text class="banner-title">{{ banner.title }}</text>
-    </list-item>
+    </list-item>
+    <!-- #ifdef APP -->
     <sticky-header>
       <view
         style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
@@ -12,7 +13,8 @@
           {{name}}
         </text>
       </view>
-    </sticky-header>
+    </sticky-header>
+    <!-- #endif -->
     <list-item v-for="(value, index) in listData" :key="index" type=2>
       <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
         <view class="uni-media-list">

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

@@ -70,7 +70,7 @@
         dataList: [] as ListItem[],
         isEnded: false,
         loadingError: '',
-        $currentPage: 1
+        currentPage: 1
       }
     },
     computed: {
@@ -94,7 +94,7 @@
     methods: {
       refreshData(loadComplete : (() => void) | null) {
         this.dataList.length = 0
-        this.$currentPage = 1
+        this.currentPage = 1
         this.loadData(loadComplete)
       },
       loadData(loadComplete : (() => void) | null) {
@@ -107,7 +107,7 @@
           url: SERVER_URL,
           data: {
             type: this.type,
-            page: this.$currentPage,
+            page: this.currentPage,
             page_size: PAGE_SIZE
           },
           success: (res) => {
@@ -121,7 +121,7 @@
             if (responseData.data.length == 0) {
               this.isEnded = true
             } else {
-              this.$currentPage++
+              this.currentPage++
             }
           },
           fail: (err) => {

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

@@ -79,21 +79,21 @@
           } as SwiperViewItem
         ] as SwiperViewItem[],
         swiperIndex: -1,
-        $pageScrollView: null as null | UniElement,
-        $headerHeight: 0,
-        $animationFinishIndex: 0,
-        $tabScrollView: null as null | UniElement,
-        $indicatorNode: null as null | UniElement,
-        $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[]
+        pageScrollView: null as null | UniElement,
+        headerHeight: 0,
+        animationFinishIndex: 0,
+        tabScrollView: null as null | UniElement,
+        indicatorNode: null as null | UniElement,
+        swiperWidth: 0,
+        swiperTabsRect: [] as SwiperTabsItem[]
       }
     },
     onReady() {
-      this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
-      this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
-      this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
-      this.$tabScrollView = this.$refs['tabScroll'] as UniElement
-      this.$indicatorNode = this.$refs['indicator'] as UniElement
+      this.pageScrollView = this.$refs['pageScrollView'] as UniElement;
+      this.headerHeight = (this.$refs['header'] as UniElement).offsetHeight
+      this.swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
+      this.tabScrollView = this.$refs['tabScroll'] as UniElement
+      this.indicatorNode = this.$refs['indicator'] as UniElement
       this.cacheTabItemsSize()
       this.setSwiperIndex(0, true)
     },
@@ -109,28 +109,28 @@
       },
       onNestedPreScroll(event : NestedPreScrollEvent) {
         const deltaY = event.deltaY
-        const scrollTop = this.$pageScrollView!.scrollTop
+        const scrollTop = this.pageScrollView!.scrollTop
 
         // 优先处理父容器滚动，父容器不能滚动时滚动子
 
         if (deltaY > 0) {
           // 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
-          if (scrollTop < this.$headerHeight) {
-            const difference = this.$headerHeight - scrollTop - deltaY
+          if (scrollTop < this.headerHeight) {
+            const difference = this.headerHeight - scrollTop - deltaY
             if (difference > 0) {
-              this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+              this.pageScrollView!.scrollBy(event.deltaX, deltaY)
               event.consumed(event.deltaX, deltaY)
             } else {
               const top : number = deltaY + difference
               event.consumed(event.deltaX, top.toFloat())
-              this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
+              this.pageScrollView!.scrollBy(event.deltaX, top.toFloat())
             }
           }
         } else if (deltaY < 0) {
           // 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0
           if (scrollTop > 0) {
             event.consumed(event.deltaX, deltaY)
-            this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+            this.pageScrollView!.scrollBy(event.deltaX, deltaY)
           }
         }
       },
@@ -146,9 +146,9 @@
         const offset_x = e.detail.dx
 
         // 计算当前索引并重置差异
-        const current_offset_x = offset_x % this.$swiperWidth
-        const current_offset_i = offset_x / this.$swiperWidth
-        const current_index = this.$animationFinishIndex + parseInt(current_offset_i + '')
+        const current_offset_x = offset_x % this.swiperWidth
+        const current_offset_i = offset_x / this.swiperWidth
+        const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')
 
         // 计算目标索引及边界检查
         let move_to_index = current_index
@@ -159,7 +159,7 @@
         }
 
         // 计算偏移百分比
-        const percentage = Math.abs(current_offset_x) / this.$swiperWidth
+        const percentage = Math.abs(current_offset_x) / this.swiperWidth
 
         // 通知更新指示线
         this.updateTabIndicator(current_index, move_to_index, percentage)
@@ -169,14 +169,14 @@
       },
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
         this.setSwiperIndex(e.detail.current, true)
-        this.$animationFinishIndex = e.detail.current
-        console.log('this.$animationFinishIndex', e.detail.current);
+        this.animationFinishIndex = e.detail.current
+        console.log('this.animationFinishIndex', e.detail.current);
       },
       cacheTabItemsSize() {
-        this.$swiperTabsRect.length = 0
+        this.swiperTabsRect.length = 0
         const tabs = this.$refs["swipertab"] as UniElement[]
         tabs.forEach((node) => {
-          this.$swiperTabsRect.push({
+          this.swiperTabsRect.push({
             x: node.offsetLeft,
             w: node.offsetWidth
           } as SwiperTabsItem)
@@ -196,8 +196,8 @@
         }
       },
       updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
-        const current_size = this.$swiperTabsRect[current_index]
-        const move_to_size = this.$swiperTabsRect[move_to_index]
+        const current_size = this.swiperTabsRect[current_index]
+        const move_to_size = this.swiperTabsRect[move_to_index]
 
         // 计算指示线 左边距 和 宽度 在移动过程中的线性值
         const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
@@ -205,12 +205,12 @@
 
         // 更新指示线
         const x = indicator_line_x + indicator_line_w / 2
-        this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
+        this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
 
         // 滚动到水平中心位置
-        const scroll_x = x - this.$swiperWidth / 2
-        if(this.$tabScrollView !== null){
-          this.$tabScrollView!.scrollLeft = scroll_x
+        const scroll_x = x - this.swiperWidth / 2
+        if(this.tabScrollView !== null){
+          this.tabScrollView!.scrollLeft = scroll_x
         }
       },
       initSwiperItemData(index : number) {

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

@@ -89,22 +89,22 @@
           } as SwiperViewItem
         ] as SwiperViewItem[],
         swiperIndex: -1,
-        $pageScrollView: null as null | UniElement,
-        $headerHeight: 0,
-        $animationFinishIndex: 0,
-        $tabScrollView: null as null | UniElement,
-        $indicatorNode: null as null | UniElement,
-        $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[],
+        pageScrollView: null as null | UniElement,
+        headerHeight: 0,
+        animationFinishIndex: 0,
+        tabScrollView: null as null | UniElement,
+        indicatorNode: null as null | UniElement,
+        swiperWidth: 0,
+        swiperTabsRect: [] as SwiperTabsItem[],
         nestedScrollChildId: ""
       }
     },
     onReady() {
-      this.$pageScrollView = this.$refs['pageScrollView'] as UniElement;
-      this.$headerHeight = (this.$refs['header'] as UniElement).offsetHeight
-      this.$swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
-      this.$tabScrollView = this.$refs['tabScroll'] as UniElement
-      this.$indicatorNode = this.$refs['indicator'] as UniElement
+      this.pageScrollView = this.$refs['pageScrollView'] as UniElement;
+      this.headerHeight = (this.$refs['header'] as UniElement).offsetHeight
+      this.swiperWidth = (this.$refs['swiper'] as UniElement).getBoundingClientRect().width
+      this.tabScrollView = this.$refs['tabScroll'] as UniElement
+      this.indicatorNode = this.$refs['indicator'] as UniElement
       this.cacheTabItemsSize()
       this.setSwiperIndex(0, true)
     },
@@ -120,19 +120,19 @@
       },
       onNestedPreScroll(event : NestedPreScrollEvent) {
         const deltaY = event.deltaY
-        const scrollTop = this.$pageScrollView!.scrollTop
+        const scrollTop = this.pageScrollView!.scrollTop
 
         if (deltaY > 0) {
           // 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
-          if (scrollTop < this.$headerHeight) {
-            const difference = this.$headerHeight - scrollTop - deltaY
+          if (scrollTop < this.headerHeight) {
+            const difference = this.headerHeight - scrollTop - deltaY
             if (difference > 0) {
-              this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+              this.pageScrollView!.scrollBy(event.deltaX, deltaY)
               event.consumed(event.deltaX, deltaY)
             } else {
               const top : number = deltaY + difference
               event.consumed(event.deltaX, top.toFloat())
-              this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
+              this.pageScrollView!.scrollBy(event.deltaX, top.toFloat())
             }
           }
         }
@@ -149,9 +149,9 @@
         const offset_x = e.detail.dx
 
         // 计算当前索引并重置差异
-        const current_offset_x = offset_x % this.$swiperWidth
-        const current_offset_i = offset_x / this.$swiperWidth
-        const current_index = this.$animationFinishIndex + parseInt(current_offset_i + '')
+        const current_offset_x = offset_x % this.swiperWidth
+        const current_offset_i = offset_x / this.swiperWidth
+        const current_index = this.animationFinishIndex + parseInt(current_offset_i + '')
 
         // 计算目标索引及边界检查
         let move_to_index = current_index
@@ -162,7 +162,7 @@
         }
 
         // 计算偏移百分比
-        const percentage = Math.abs(current_offset_x) / this.$swiperWidth
+        const percentage = Math.abs(current_offset_x) / this.swiperWidth
 
         // 通知更新指示线
         this.updateTabIndicator(current_index, move_to_index, percentage)
@@ -172,13 +172,13 @@
       },
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
         this.setSwiperIndex(e.detail.current, true)
-        this.$animationFinishIndex = e.detail.current
+        this.animationFinishIndex = e.detail.current
       },
       cacheTabItemsSize() {
-        this.$swiperTabsRect.length = 0
+        this.swiperTabsRect.length = 0
         const tabs = this.$refs["swipertab"] as UniElement[]
         tabs.forEach((node) => {
-          this.$swiperTabsRect.push({
+          this.swiperTabsRect.push({
             x: node.offsetLeft,
             w: node.offsetWidth
           } as SwiperTabsItem)
@@ -198,8 +198,8 @@
         }
       },
       updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
-        const current_size = this.$swiperTabsRect[current_index]
-        const move_to_size = this.$swiperTabsRect[move_to_index]
+        const current_size = this.swiperTabsRect[current_index]
+        const move_to_size = this.swiperTabsRect[move_to_index]
 
         // 计算指示线 左边距 和 宽度 在移动过程中的线性值
         const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
@@ -207,12 +207,12 @@
 
         // 更新指示线
         const x = indicator_line_x + indicator_line_w / 2
-        this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
+        this.indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
 
         // 滚动到水平中心位置
-        const scroll_x = x - this.$swiperWidth / 2
-        if(this.$tabScrollView !== null){
-          this.$tabScrollView!.scrollLeft = scroll_x
+        const scroll_x = x - this.swiperWidth / 2
+        if(this.tabScrollView !== null){
+          this.tabScrollView!.scrollLeft = scroll_x
         }
       },
       initSwiperItemData(index : number) {