diff --git a/pages/template/swiper-list/swiper-list.uvue b/pages/template/swiper-list/swiper-list.uvue index a2b3d8a2263316aa1fba9787bca4822ddf14c1d0..8f00df76bbd0f2e723404ce091cafb7e20ea92fa 100644 --- a/pages/template/swiper-list/swiper-list.uvue +++ b/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 } } }