WeChat mini-program swiper component carousel diagram details and examples, mini-program swiper

Detailed description and examples of the carousel diagram of the mini-program swiper component, and the mini-program swiper

Small Program swiper component carousel Diagram

Try according to the development documentation, and always get something. before Android development, it was not easy to create a carousel image. We used viewpage and set up dots. After a while, there were a bunch of bugs. today, I was deeply touched by my tears when I tried to develop a small program for carousel images. the nonsense is over ,.

Is it a simple carousel image? It's very easy. 23333

The Code is also very simple.

1. index. wxml

<!--index.wxml-->    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">     <block wx:for="{{movies}}" wx:for-index="index">      <swiper-item>       <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>      </swiper-item>     </block>    </swiper> 

Several attributes need to be described here.

<Block wx: for>

Here I traverse the movies [] array. <swiper-item> is the item

2. index. js

// Index. js // obtain the application instance var app = getApp () Page ({data: {movies: [{url: 'http: // im%4.tooopen.com/images/20130712/tooopen_17270713.jpg'}, {url: 'http: // response },{ url: 'http: // imipv4.tooopen.com/images/20130701/tooopen_20083555.jpg'}, {url: 'http: // response}]}, onLoad: function (){}})

3. WXML

/**index.wxss**/.swiper { height: 400rpx; width: 100%;}.swiper image { height: 100%; width: 100%;}

WXSS is not much said, it is no different from CSS.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!