swiper-list: 移除变量名前面的$, 支持 web

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

@@ -45,12 +45,12 @@
     data() {
       return {
         swiperList: [] as SwiperViewItem[],
-        swiperIndex: -1,
-        $tabScrollView: null as null | UniElement,
-        $indicatorNode: null as null | UniElement,
-        $animationFinishIndex: 0,
-        $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[]
+        swiperIndex: 0,
+        tabScrollView: null as null | UniElement,
+        indicatorNode: null as null | UniElement,
+        animationFinishIndex: 0,
+        swiperWidth: 0,
+        swiperTabsRect: [] as SwiperTabsItem[]
       }
     },
     onLoad() {
@@ -63,11 +63,11 @@
       }
     },
     onReady() {
-      this.$tabScrollView = this.$refs['tabScroll'] as UniElement
-      this.$indicatorNode = this.$refs['indicator'] as UniElement
-      this.$swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
+      this.tabScrollView = this.$refs['tabScroll'] as UniElement
+      this.indicatorNode = this.$refs['indicator'] as UniElement
+      this.swiperWidth = (this.$refs["swiper"] as UniElement).getBoundingClientRect().width
       this.cacheTabItemsSize()
-      this.setSwiperIndex(0, true)
+      this.updateTabIndicator(this.swiperIndex, this.swiperIndex, 1)
     },
     methods: {
       /**
@@ -87,9 +87,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 + Math.floor(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
@@ -100,7 +100,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)
@@ -112,16 +112,16 @@
         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)
@@ -152,8 +152,8 @@
        * @param {number} percentage - 偏移百分比，应介于 0 和 1 之间，用于计算在移动过程中的线性值.
        */
       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)
@@ -161,13 +161,11 @@
 
         // 通过 transform 更新指示线，避免重排版
         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
+        this.tabScrollView!.scrollLeft = scroll_x
       }
     }
   }