微信小程序 自动左右滑动切换展示图片

1.在index.wxml中代码编写：

Scroll-view：可滚动视图区域
Swiper：图片轮播容器
indicator-dots：boolean类型，是否显示面板指示点（默认false）
autoplay：boolean类型，是否自动切换（默认false）
interval：number类型，自动切换时间间隔
duration：number类型，滑动动画时长
imgUrls：多个图片的路径集合
item：循环遍历后单个图片的路径
官方参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

<scroll-view class="container">
<swiper indicator-dots="{
   
   {indicatorDots}}" autoplay="{
   
   {autoplay}}" interval="{
   
   {interval}}" duration="{
   
   {duration}}">
 <block wx:for="{
   
   {imgUrls}}">
   <swiper-item>
     <image src="{
   
   {item}}"  style="height: 220px; width: 100%;"   class='img' />
  </swiper-item>
 </block>
</swiper>
</scroll-view>

可以留意看看style的设置，在这里我将高度定义了，宽度的设置就是自适应。

2.在index.wxml中代码编写：

一般我会在wxml里设置属性和路径，方便调用。

Page({
data:{
imgUrls: [
    ‘图片路径1’,
    '图片途径2'
    ‘图片路径3’，
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
},

3.在index.wxss中的编写：

样式我一般只会设立高度，宽度就自适应。相对避免手机型号不同，会造成图片不能全屏显示的情况。

.container{
  width: 100%;
  height: 100vh;
}
swiper{
  width: 100%;
  height: 220px;
}
.img{
  border-top: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
}

完成以上操作，就会完成一个自动轮播切换图片的展示功能。