微信小程序輪播圖

我們開發web頁面的時候，無論是圖片還是模塊，很多時候會用到輪播，那么下面是微信小程序的輪播功能，也是小程序自帶的swiper輪播功能。

下面是輪播展示圖：

 

熟悉一下swiper配置屬性，這里的配置屬性和我們平時用的輪播插件配置屬性差別不大：（點擊查看微信小程序開發文檔）

  

首先是在wxml文件中加入swiper模塊（我這里是把內容模塊循環出來的）：

<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>

 

數據來源自wxml對應的js文件：

 data: {
    expers:[
      { title:'北京網易雲科技有限公司',content:'13666888866' },
      { title: '北京網易雲科技有限公司', content:'13788668899' },
      { title: '北京網易雲科技有限公司', content: '13499000077' },
      { title: '北京網易雲科技有限公司', content: '15288000088' },
            
    ]
  },

 

然后在wxss中增加自己想要的樣式就可以了。