微信小程序swiper上下滑动卡顿

效果:页面上下滑动,类似H5

当滑动的内容过多时,下方的内容会被遮盖,此时滑动会不流畅。
原因:内容的滑动和swiper的滑动有冲突
解决办法:在swiper-item中嵌套一个scroll-view

// DOM
<swiper class="swiper" :vertical="true" :current="currentTab" @change="handleChangeTab">
	<swiper-item>
		<A/>
	</swiper-item>
	<swiper-item :scroll-y="true" class="swiperConnect">
		<scroll-view scroll-y style='height:100%;'>
			<B/>
		</scroll-view>
	</swiper-item>
</swiper>

// 数据
data() {
	return {
		currentTab: 0, // 当前页面所在的tab
	};
}


// 方法
methods: {
	// 更改tab的方法
	handleChangeTab(e) {
		this.currentTab = e.detail.current
	}
}

// 样式
.swiper {
	min-height: 100vh;
}
swiper-item {
  overflow: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

你可能感兴趣的:(小程序,小程序,javascript,微信)