Small micro-channel program development (vi) Production of FIG loop

We often see, contains a circular scrolling carousel picture in the applet, this is how to do it, this article I will take you to complete the look, this function.

Let's look at renderings completed:

 

 

From the renderings, we can see that there Carousel Figure 3, click the carousel pictures, the current page can also respond.

First established in the project root images folder and ready three pictures on them. Specifically, as shown:

 

 Specific reference code:

js file code:

Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    imageItems: [{
      id: 1,
      imgsrc: "../../images/1.png",
      link: "http://www.test.com/id=1"
    }, {
      id: 2,
      imgsrc: "../../images/2.png",
      link: "http://www.test.com/id=2"
    }, {
      id: 15,
      imgsrc: "../../images/15.png",
      link: "http://www.test.com/id=15"
    }],
    info:""
  },
  / * Click on the image event handler * / 
  imgTap: function (params) {
     / * * 
     set of parameters * params behalf pass over 
     * wxml page through data in - ** Format pass over 
     * by params.currentTarget in js function. . dataset ** way to get the 
     * / 
    / * * debugger pass over the console output parameter Link * / 
    console.info (params.currentTarget.dataset.link); 
    / * * by tips pass over the displayed parameter id 
     * Note that, title can only accept a string type value, since id is an integer, so we need to use + "" approach to convert into 
     * / 
    wx.showToast ({ 
      title: params.currentTarget.dataset.id + "" , 
    }) 
    / * * the following code shows how the values of the dynamic data set 
     * info set the value of the parameter to pass over Link 
    * / 
    the this.setData({
      info: params.currentTarget.dataset.link
    })
  }
})

 

 wxss file code:

.swiperItem {
    width: 100%;
    height: 500rpx;    
}

 

wxml file code:

<swiper class="swiperItem" indicator-dots="true" indicator-color="rgba(0,0,0,.3)" autoplay="true" 
    interval="5000" duration="1000" circular="true">
    
    <block wx:for="{{imageItems}}" wx:key="*this" wx:for-item="img">
        <swiper-item>
            <image class="swiperItem" bindtap="imgTap" data-link="{{img.link}}" data-id="{{img.id}}" src="{{img.imgsrc}}" mode="aaspectFill" lazy-load="false">             
            </image>
        </swiper-item>
    </block>
</swiper>

<text style="color:red;width:100%;height:50rpx">{{info}}</text>

 

Micro letter applet carousel picture, provides a ready-made components swiper for us.

The main swiper Property Description:

indicator-dots: indicator whether rotation, i.e. below the dot

autoplay: whether to automatically play

interval: each image switching time interval, in milliseconds

duration: switching takes milliseconds

Other specific usage, view the document it, kids.

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 

The main explanation:

bindtap is binding events, imgTap is done in the js file incident response function

DATA- * * parameters passed to the event, that is the parameter name *, the present embodiment two transmission parameters, link and id

OK! Carousel finished close! There are questions, comments!

I am concerned, you will get a better learning experience!