WeChat applet carousel

When we develop web pages, whether it is pictures or modules, we often use carousel, so the following is the carousel function of the WeChat applet, which is also the swiper carousel function that comes with the applet.

The following is the carousel display:

 

Familiarize yourself with the swiper configuration properties. The configuration properties here are not much different from the configuration properties of the carousel plug-in we usually use : ( click to view the WeChat applet development documentation )

  

The first is to add the swiper module to the wxml file (I am looping out the content module here) :

<swiper class='swiper' indicator-dots='true' autoplay='true' interval='3000' duration='1000'>
  <block wx:for='{{expers}}' wx:for-index='index'>
    <swiper-item>
      <view class='exp__list'>
        <view class='__exp_title'>{{item.title}}</view>
        <view class='__exp_tel'>{{item.content}}</view>
      </view>
    </swiper-item>
  </block>
</swiper>

 

The data comes from the js file corresponding to wxml :

data: {
    free from:[
      { title:'Beijing NetEase Cloud Technology Co., Ltd.',content:'13666888866' },
      { title: 'Beijing NetEase Cloud Technology Co., Ltd.', content: '13788668899' },
      { title: 'Beijing NetEase Cloud Technology Co., Ltd.', content: '13499000077' },
      { title: 'Beijing NetEase Cloud Technology Co., Ltd.', content: '15288000088' },
            
    ]
  },

 

Then you can add the style you want in wxss.