微信小程序的轮播图

微信开发文档->组件->视图容器->swiper

一部分属性：

代码：

<!--index.wxml-->
<view class="container">
<swiper indicator-dots="true"
       autoplay="{{true}}" interval="3000" duration="1000">
          <swiper-item>
            <image src="/images/h1.png" class="slide-image" width="355" height="150"/>
          </swiper-item>

          <swiper-item>
            <image src="/images/h1.png" class="slide-image" width="355" height="150"/>
          </swiper-item>

          <swiper-item>
            <image src="/images/hr0.jpg" class="slide-image" width="355" height="150"/>
          </swiper-item>
        
</swiper>

</view>

循环写法：

<!--index.wxml-->
<view class="container">
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">


  <block wx:for="{{imgUrls}}"><!--循环-->
   <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block> 
  

</swiper>
</view>

/*index.js*/
Page({
 data: {
    imgUrls:[
      '/images/h1.png',
      '/images/h2.png',
      '/images/h3.png'
    ]
  },
  
...