创建目录如图
名称不能直接为Swiper.vue或者swiper.vue,会出问题
把轮播图放在static中img目录下
在IndexSwiper.vue中编辑轮播图的src地址
每张图片的代码如图
<swiper-item>
<view class="swiper-item">
<image class="swiper-img" src="../../static/img/swiper1.jpg" mode=""></image>
</view>
</swiper-item>
且在每张图片前class命名为"swiper-img"来进行整个页面的大小调整
最终结果如下:
再在IndexSwiper进行大小调整,
IndexSwiper.vue完整代码
<template>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item">
<image class="swiper-img" src="../../static/img/swiper1.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class="swiper-img" src="../../static/img/swiper2.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class="swiper-img" src="../../static/img/swiper3.jpg" mode=""></image>
</view>
</swiper-item>
</swiper>
</template>
<script>
</script>
<style scope>
swiper{
width:100%;
height: 400rpx;
}
.swiper-img{
width:100%;
height: 400rpx;
}
</style>
运行成功结果:会自动进行轮播,图片无压缩