uniapp开发问题记录（1）

问题

页面结构：

<swiper :current="idx" @change="onSwipe" class="page-swiper" :duration="800" :circular="true"
			:skip-hidden-item-layout="true">
			<swiper-item v-for="(tab, i) in 7" :key="i">
				<!-- 每页一个透明层 -->
				<view class="page-fade" :class="i === idx ? 'fade-in' : 'fade-out'" v-show="visiblePages[i]"
					@animationend="onFadeEnd(i)">
					<scroll-view scroll-y="true" class="tab-scroll" refresher-enabled="true" @refresherrefresh="refresh"
						:refresher-triggered="triggered">

下拉刷新时所绑定的事件被多次触发

原因：

7 个 scroll-view 是同时存在的（swiper-item 只是被 v-show 显隐，并没有销毁），
你把同一个变量 triggered 和同一个方法 refresh 同时绑给了 7 个实例，
于是任意一个下拉，7 个都会一起触发。

解决思路：让“刷新状态”和“刷新函数”各自独立

1. 给每个 scroll-view 单独的下标级状态
   把 triggered 做成数组 / 对象，而不是全局一个布尔值：

data() {
  return {
    triggered: [false, false, false, false, false, false, false] // 7 份
  }
}

2. 刷新事件也带下标
   模板里把索引传进去：

<scroll-view
  scroll-y
  refresher-enabled
  :refresher-triggered="triggered[i]"
  @refresherrefresh="refresh(i)">
</scroll-view>

3. 方法里只操作对应下标的那一份

methods: {
  async refresh(i) {
    this.$set(this.triggered, i, true)          // 1. 开启第 i 个刷新动画
    await this.loadTabData(i)                   // 2. 只拉第 i 页的数据
    this.$set(this.triggered, i, false)         // 3. 关闭第 i 个刷新动画
  }
}

总结

swiper-item 里的 7 个 scroll-view 是并行存活的，
一个全局变量 + 一个全局函数就会被它们共享触发；
把 triggered 和 refresh 都改成**“按页独立”**，就能保证每页只触发自己的那一次。