swiper

滑块视图容器。一般用于左右滑动或上下滑动,比如 banner 轮播图。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在 2 个滑动区域之间。

demo.vue:

						
<template>
  <view>

    <view class="wrap-container">
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item>
          <view class="swiper-item">
            <image style="width: 100%; height: 100%;" :mode="mode" :src="adSrc[0]"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image style="width: 100%; height: 100%;" :mode="mode" :src="adSrc[1]"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image style="width: 100%; height: 100%;" :mode="mode" :src="adSrc[2]"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="other-container">
    </view>

    <view class="other-container">
    </view>   

  </view>
</template>

<script>
  export default {
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 500,
        mode: 'aspectFill',
        src: ['https://www.whlearn.com/demo/images/ad_001.png', 'https://www.whlearn.com/demo/images/ad_002.png', 'https://www.whlearn.com/demo/images/ad_003.png']
      }
    },
    method: {

    }
  }
</script>
  .wrap-container {
    width: 690rpx;
    width: 100%;
  }
  .swiper {
    height: 300rpx;
  }
  .swiper-item {
    display: block;
    height: 300rpx;
    line-hieght: 300rpx;
    text-align: center;
  }
<style>
  
</style>