mpvue使用微信小程序原生swiper组件实现轮播图

废话不多说,直接上代码:

在components文件夹下自定义一个组件叫

swiper.vue

,代码如下:

<template>
    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <block v-for="(item, index) in images" :key="index">
            <swiper-item>
                <image :src="item.url" class="slide-image" mode="aspectFill"/>
            </swiper-item>
        </block>
    </swiper> 
</template>

<script>
export default {
  props: {
    images: {
      type: Array
    }
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500
    };
  }
};
</script>

<style scoped>
.swiper {
  height: 376rpx !important;
}
image {
  height: 100%;
  width: 100%;
}
</style>

                

然后在index.vue中引入.代码如下:

<template>
  <view>
    <Swiper :images="images" />
  </view>
</template>

<script>
import Swiper from "@/components/swiper";

export default {
  components: { Swiper },
  data() {
    return {
      images: [
        {
          url:
            "https://img-oss.yunshanmeicai.com/goods/default/31d8dfa4-0d7b-4694-80f9-41b07c9d0a3a.png"
        },
        {
          url:
            "https://img-oss.yunshanmeicai.com/goods/default/e83c8f0f-4acc-4729-bcbb-294f2b314977.jpg"
        }
      ]
    };
  },
  methods: {},
  computed: {}
};
</script>

<style>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>