uniapp中swiper切换tab后,滑动内容,原tab的内容也会跟着滑动,如何解决(不要用scroll-view,用view)
时间: 2024-03-12 22:43:06 浏览: 128
微信小程序scroll-view+swiper切换内容
可以在swiper的动画结束后,手动将原tab的内容隐藏掉,避免滑动时的干扰。具体实现可以参考以下代码:
1. 在swiper的change事件中添加代码,监听swiper的切换,动画结束后隐藏原tab的内容:
```javascript
<swiper @change="swiperChange">
<swiper-item>
<view class="tab1">tab1内容</view>
</swiper-item>
<swiper-item>
<view class="tab2">tab2内容</view>
</swiper-item>
</swiper>
<script>
export default {
methods: {
swiperChange(e) {
const currentIndex = e.detail.current
const preIndex = e.detail.previous
setTimeout(() => {
// 动画结束后再隐藏原tab的内容
this.hideTabContent(preIndex)
}, 500)
},
hideTabContent(index) {
const tabContent = this.$el.querySelectorAll('.swiper-item')[index].querySelector('.tab-content')
tabContent.style.display = 'none'
}
}
}
</script>
```
2. 在每个tab的内容中添加一个class为`tab-content`的div,用来控制内容的显示和隐藏:
```javascript
<swiper-item>
<view class="tab2">
<div class="tab-content">
tab2内容
</div>
</view>
</swiper-item>
```
阅读全文