uniapp swiper 怎么获取它当前current
时间: 2024-09-15 11:05:00 浏览: 187
微信小程序修改swiper默认指示器样式的实例代码
在uni-app中,`swiper` 组件用于创建滑块视图。为了获取`swiper`组件当前显示的幻灯片索引(`current`),你可以使用`@change`事件监听器。在`swiper`组件上设置`@change="onChange"`,并定义一个方法`onChange`来处理滑动事件,并在该方法中获取当前幻灯片的索引。
以下是一个简单的示例:
```html
<template>
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true" @change="swiperChange">
<swiper-item v-for="(item, index) in imageList" :key="index">
<image :src="item" class="slide-image"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
imageList: [
'url_to_image_1',
'url_to_image_2',
'url_to_image_3'
],
current: 0
};
},
methods: {
swiperChange(e) {
// e.detail.current 表示当前滑动项的 index
this.current = e.detail.current;
}
}
}
</script>
```
在这个示例中,`swiper`组件绑定了一个`@change`事件监听器,该监听器将调用`swiperChange`方法。当用户滑动到一个新的幻灯片时,`swiperChange`方法会被触发,并通过`e.detail.current`获取当前幻灯片的索引,然后将其赋值给`current`变量。
阅读全文