微信小程序轮播图

< view>
  < swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    < block wx:for-items="{{swiperImage}}" wx:key="key">
      < swiper-item>
        < image src="{{item.url}}" style="width:100%;height:100%" class="slide-image" mode="aspectFill" />
      < /swiper-item>
    < /block>
  < /swiper>
< /view>

data: {
data: {
  swiperImage: [
    { url: 'https://static.couragesteak.com/article/pe/swiper/swiper3.jpg' },
    { url: 'https://static.couragesteak.com/article/pe/swiper/swiper2.jpg' },
    { url: 'https://static.couragesteak.com/article/pe/swiper/swiper1.jpg' }
  ],
},

<h2><a id="1_indexhtml_0"></a>1 index.html</h2> <pre><div class="hljs"><code class="lang-html">&lt; view&gt; &lt; swiper class=&quot;swiper&quot; indicator-dots=&quot;true&quot; autoplay=&quot;true&quot; interval=&quot;5000&quot; duration=&quot;1000&quot;&gt; &lt; block wx:for-items=&quot;{{swiperImage}}&quot; wx:key=&quot;key&quot;&gt; &lt; swiper-item&gt; &lt; image src=&quot;{{item.url}}&quot; style=&quot;width:100%;height:100%&quot; class=&quot;slide-image&quot; mode=&quot;aspectFill&quot; /&gt; &lt; /swiper-item&gt; &lt; /block&gt; &lt; /swiper&gt; &lt; /view&gt; </code></div></pre> <h2><a id="2_indexjs_12"></a>2 index.js</h2> <pre><div class="hljs"><code class="lang-js"><span class="hljs-attr">data</span>: { <span class="hljs-attr">data</span>: { <span class="hljs-attr">swiperImage</span>: [ { <span class="hljs-attr">url</span>: <span class="hljs-string">&#x27;https://static.couragesteak.com/article/pe/swiper/swiper3.jpg&#x27;</span> }, { <span class="hljs-attr">url</span>: <span class="hljs-string">&#x27;https://static.couragesteak.com/article/pe/swiper/swiper2.jpg&#x27;</span> }, { <span class="hljs-attr">url</span>: <span class="hljs-string">&#x27;https://static.couragesteak.com/article/pe/swiper/swiper1.jpg&#x27;</span> } ], }, </code></div></pre>