uniapp swiper在请求数据时候禁止左右拖动
时间: 2024-09-26 15:02:48 浏览: 61
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
5星 · 资源好评率100%
在UniApp中,如果你想在Swiper组件请求数据时禁用左右滑动功能,你可以通过设置`autoplay`属性为`false`来阻止自动轮播,并监听`load`事件,在数据加载完成后手动启用滑动。这是一个简单的例子:
```html
<swiper :autoplay="false" @load="onLoad">
<swiper-item v-for="(item, index) in items" :key="index">
<div>{{ item.content }}</div>
</swiper-item>
</swiper>
<script>
export default {
data() {
return {
items: [], // 数据列表
isDragging: true, // 初始状态,表示是否允许滑动
};
},
onLoad() {
this.isDragging = false; // 数据加载完后设为false,禁用滑动
// 在这里异步获取数据并更新items
this.$axios.get('your-api-url').then(response => {
this.items = response.data;
// 数据加载完成后,再设定允许滑动
this.isDragging = true;
});
},
};
</script>
```
在这个例子中,当数据请求完成并成功赋值给`items`后,`isDragging`会被设置回`true`,此时滑动会再次可用。
阅读全文