微信小程序之轮播图(附带图片)

微信小程序之轮播图

大家好，今天我们来学习一下使用微信小程序的轮播图，好好看，好好学，超详细的。

第一步

首先，我们来了解一下微信小程序轮播图的组件，进入小程序官方文档

第二步

直接上代码

<swiper class="banners" indicator-dots autoplay  indicator-active-color="#d43c33" indicator-color="ivory">
    <swiper-item wx:for="{
     
     {imgUrl}}" wx:key="bannerId">
      <image mode="widthFix" src="{
     
     {item}}" />
    </swiper-item>
</swiper>

.banners{
    
    
  width: 100%;
  height: 300rpx;
}

.banners image{
    
    
  height: 100%;
  width: 100%;
}

 data: {
    
    
    imgUrl: [
      'http://p1.music.126.net/RHDhAOnxZqGtjxjK2s49vg==/109951165466303909.jpg',
      'http://p1.music.126.net/nZtHrj-Wj76vGFn-0kBqaw==/109951165466309360.jpg',
      'http://p1.music.126.net/H1HiJsIq3cLPsfaDLtxRjw==/109951165466767053.jpg',
      'http://p1.music.126.net/oR_IMlwHAu1j0EwfoIVDYw==/109951165466745785.jpg',
      'http://p1.music.126.net/0jPrUkboZ-rFbzCArv-8aQ==/109951165466351711.jpg',
      'http://p1.music.126.net/Xs1sJ_Q3Top3Psv3qGVzmw==/109951165466227994.jpg'
    ], //轮播图
  },

indicator-active-color="#d43c33" indicator-color=“ivory” 这两个是设置轮播图指示点的颜色,如下图：

结语

关于微信小程序轮播图就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习