轻松拿捏！手动控制swiper滑动指南

在uniapp和微信小程序网页设计和开发过程中，轮播图（swiper）是一个常见的功能。然而，有时候我们希望手动控制swiper的滑动，以实现更丰富的交互效果。今天，我就来为大家分享一篇关于如何手动控制swiper滑动的指南。

swiper组件的播放方式

1、自动播放 

通过设置 autoplay 属性为 true，轮播图将自动播放。可以配合 interval 属性设置自动播放的时间间隔。

<swiper autoplay="true" interval="3000">
  <!-- swiper-item -->
</swiper>

2、触摸播放

默认情况下，轮播图是可以通过触摸滑动的。如果你想禁用触摸滑动，可以将 touchable 属性设置为 false。

<swiper touchable="false">
  <!-- swiper-item -->
</swiper>

3、当前页码

通过 current 属性可以设置轮播图的初始显示页码。

<swiper current="1">
  <!-- swiper-item -->
</swiper>

手动切换轮播图

方法一：直接修改 current 属性

你可以直接在 <swiper> 组件上绑定一个数据属性，然后通过修改这个数据属性来改变当前显示的轮播图项

<template>
  <view>
    <swiper :current="swiperCurrent" @change="swiperChange">
      <swiper-item>1</swiper-item>
      <swiper-item>2</swiper-item>
      <swiper-item>3</swiper-item>
    </swiper>
    <button @click="prevSlide">上一张</button>
    <button @click="nextSlide">下一张</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperCurrent: 0 // 初始值为0
    }
  },
  methods: {
    swiperChange(e) {
      // 监听轮播图变化事件，可以在这里同步current值
      this.swiperCurrent = e.detail.current;
    },
    prevSlide() {
      // 点击按钮切换到上一张
      this.swiperCurrent = (this.swiperCurrent - 1 + 3) % 3; // 假设有3张图片
    },
    nextSlide() {
      // 点击按钮切换到下一张
      this.swiperCurrent = (this.swiperCurrent + 1) % 3; // 假设有3张图片
    }
  }
}
</script>

方法二：使用 this.$refs 访问组件实例

如果你给 <swiper> 组件添加了 ref 属性，你可以通过 this.$refs 来访问组件实例，并调用其方法来改变 current。

<template>
  <view>
    <swiper ref="mySwiper" :current="swiperCurrent">
      <swiper-item>1</swiper-item>
      <swiper-item>2</swiper-item>
      <swiper-item>3</swiper-item>
    </swiper>
    <button @click="goToSlide(1)">跳转到第二张</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperCurrent: 0 // 初始值为0
    }
  },
  methods: {
    goToSlide(index) {
      // 跳转到指定的轮播图项
      this.$refs.mySwiper.swiperCurrent = index; // 直接修改current值
    }
  }
}
</script>

注意事项

使用这些方法，你可以很容易地通过编程方式控制轮播图的滑动。记得在修改 current 属性时，确保其值在正确的范围内，即大于等于 0 且小于 swiper-item 的数量。