uni-appswiper详解

一、uni-appswiper嵌套

在uni-app中，我们可以使用uni-appswiper来轻松地实现轮播图的功能。而对于一些特殊需求，我们可能需要在一个uni-appswiper中嵌套另一个uni-appswiper来实现复杂的轮播效果。

要实现uni-appswiper嵌套，我们需要在外层swiper中设置direction属性为’vertical’，使其为纵向轮播，同时需要在每个嵌套的swiper-item中设置height属性为整个外层swiper的高度，以便能够正常显示。

<uni-swiper direction='vertical' :indicator-dots="false">
  <uni-swiper-item v-for="(item, index) in list" :key="index" :height="swiperHeight">
    <uni-swiper :duration="500" :autoplay="true">
      <uni-swiper-item v-for="(subItem, subIndex) in item.subList" :key="subIndex">
        <img :src="subItem.imgUrl" :width="imgWidth" :height="swiperHeight" />
      </uni-swiper-item>
    </uni-swiper>
  </uni-swiper-item>
</uni-swiper>

二、uni-appswiper监听滑动事件

如果我们需要在轮播图滑动过程中做一些特殊的处理，比如当轮播图滑动到最后一张时，自动跳转到第一张，那么我们就需要监听 uni-appswiper 的滑动事件。

在 uni-appswiper 上，我们可以使用 swiper-change 事件来监听轮播图切换事件，其中 detail 参数中包含了当前的 current 值，表示当前轮播图显示的是第几个 item。

<uni-swiper :autoplay="true" :interval="3000" @swiper-change="swiperChange">
  <uni-swiper-item v-for="(item, index) in list" :key="index">
    <img :src="item.imgUrl" />
  </uni-swiper-item>
</uni-swiper>

swiperChange(event) {
  if (this.list.length - 1 === event.detail.current) {
    this.$refs.swiper.autoplay = false;
    setTimeout(() => {
      this.$refs.swiper.autoplay = true;
      this.$refs.swiper.current = 0;
    }, 500);
  }
}

三、uni-appswiper千叶图

在网站或app页面中，我们会经常看到千叶图的效果，那么如何使用 uni-appswiper 来实现千叶图呢？其实只需要通过设置 uni-appswiper-item 的 transform 属性即可。

<uni-swiper @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
  <uni-swiper-item v-for="(item, index) in list" :key="index" ref="swiperItem">
    <img :src="item.imgUrl" />
  </uni-swiper-item>
</uni-swiper>

touchstart(event) {
  this.startY = event.changedTouches[0].clientY;
  this.startTime = new Date().getTime();
},

touchmove(event) {
  this.moveY = event.changedTouches[0].clientY - this.startY;
  this.$refs.swiperItem[this.currentIndex].style.transform = `rotateY(${this.moveY / 4}deg)`
},

touchend(event) {
  this.endTime = new Date().getTime();
  if (this.endTime - this.startTime  30) {
      this.preItem();
    } else if (this.moveY < -30) {
      this.nextItem();
    }
  } else {
    this.changeItem();
  }
  this.moveY = 0;
  this.$refs.swiperItem[this.currentIndex].style.transform = '';
}

四、uni-appswiper做图文框

对于轮播图来说，除了显示图片之外，有时候我们还需要在图片下方添加一些文字描述。那么如何在 uni-appswiper 中做到这一点呢？只需在 uni-appswiper-item 内部加入图片和文字的容器即可。

<uni-swiper>
  <uni-swiper-item v-for="(item, index) in list" :key="index">
    <div>
      <img :src="item.imgUrl" />
      <div>
        <p>{{item.title}}</p>
        <p>{{item.desc}}</p>
      </div>
    </div>
  </uni-swiper-item>
</uni-swiper>

五、uni-appswiper点击事件无效

在 uni-app 中，如果我们使用 uni-appswiper 来显示图片后，此时发现点击图片没有任何响应，这是因为 uni-appswiper 默认是禁止了用户的点击事件，可以通过设置 uni-appswiper 的 disable-touch 属性来控制是否禁用点击事件。

<uni-swiper :disable-touch="false">
  <uni-swiper-item v-for="(item, index) in list" :key="index">
    <img :src="item.imgUrl" @click="clickHandler(index)" />
  </uni-swiper-item>
</uni-swiper>

六、uni-appswiper滑动流畅

在 uni-app 中，我们可以通过 swiper-listener 组件来监听轮播图的切换事件，进而实现更加流畅的滑动效果。

<template>
  <swiper-listener @change="changeHandler">
    <swiper-item v-for="(item, index) in list" :key="index">
      <img :src="item.imgUrl" />
    </swiper-item>
  </swiper-listener>
</template>

<script>
import SwiperListener from 'uni-app-swiper-listener'

export default {
  components: {
    SwiperListener
  },
  data() {
    return {
      list: [
        {imgUrl: '1.jpg'},
        {imgUrl: '2.jpg'},
        {imgUrl: '3.jpg'}
      ],
      currentIndex: 0
    }
  },
  methods: {
    changeHandler(currentIndex) {
      this.currentIndex = currentIndex;
    }
  }
}
</script>

七、uni-appswiper无限滑动加载

在一些需要无限滑动的场景下，我们可以借助 uni-app-swiper 的自定义 Events 来实现无限滑动加载的效果。

<template>
  <swiper-listener @change="changeHandler" @refresher="refresherHandler">
    <swiper-item v-for="(item, index) in list.slice(0, pageSize)" :key="index">
      <img :src="item.imgUrl" />
    </swiper-item>
  </swiper-listener>
</template>

<script>
import SwiperListener from 'uni-app-swiper-listener'

export default {
  components: {
    SwiperListener
  },
  data() {
    return {
      list: [
        {imgUrl: '1.jpg'},
        {imgUrl: '2.jpg'},
        {imgUrl: '3.jpg'},
        ...
      ],
      currentIndex: 0,
      pageSize: 3
    }
  },
  methods: {
    changeHandler(currentIndex) {
      if (currentIndex === this.list.length - 1) {
        this.pageSize += 3;
        this.$nextTick(() => {
          this.$refs.swiperListener.refresh();
        });
      }
    },
    refresherHandler(refresherTrigger) {
      setTimeout(() => {
        this.pageSize += 3;
        this.$refs.swiperListener.refresh();

        refresherTrigger();

        uni.showToast({
          title: '刷新成功',
          duration: 2000
        });
      }, 1500);
    }
  }
}
</script>