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>