微信小程序中的轮播图

￡神魔★判官ぃ 2021-07-27 02:51 575阅读 0赞

微信小程序中的轮播图感觉是最最最最简单的了，靠swiper这个组件就可以实现。  
有横屏轮播图和竖屏轮播图，到时候用到了，可以直接复制代码使用

**1.横屏轮播图**  
![在这里插入图片描述][20200608191047303.gif]

wxml代码：

记得更改图片路径

wxss这个里面代码就很少了

.content-info-slide{ 
      height:302rpx;
      margin-bottom: 20px;
    
    }
    .content-info-slide image{ 
      width: 100%;
      height: 100%;
    }

如果不设置宽高的话他有一个默认的宽高，忘了多少了。。。

**2竖屏轮播图：**

![20200608193736326.gif][]

与横屏相比仅仅是多了一个vertical=“true”，和改变了图片的高度  
vertical="true"是那个小黑点在右侧显示

wxml：这里的图片通过渲染的方式实现的，图片参考横屏轮播图

<scroll-view class="content-info" scroll-y="true" >
     <swiper class="content-info-slide"  indicator-active-color="black" indicator-dots circular autoplay vertical="true" interval="3500" duration="1000">
     <swiper-item wx:for="{ {img}}">
     <image src="{ {item.src}}"></image>
     </swiper-item>
     </swiper>
     </scroll-view>

wxss：

.content-info-slide{ 
      height: 1200rpx;
    }
    image{ 
      width: 100%;
      height: 100%;
    }

[20200608191047303.gif]: /images/20210726/c30adf3a1b684e68b4c45843f5cb7e95.png
[20200608193736326.gif]: /images/20210726/ac458aec1dc8480aa8ec036a2bd226fc.png