微信小程序——輪播圖實現

小程序的輪播圖，也就是他其中的一個控件能夠算是直接上代碼：

這是WXML 頁面 代碼：

  <view class='carousel_div'>
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block wx:for="{{commodity_info.LogoPaths}}" wx:for-index="index" wx:key="">

        <swiper-item>
          <image src="{{LogoIp}}{{item}}" class="slide-image" mode='aspectFill' />
        </swiper-item>
      </block>
    </swiper>
  </view>

固然還有一些參數：indicator-dots 是否顯示指視點，ndicator-color知識點的顏色 ，indicator-active-color被選中的知識點顏色，autoplay自動播放，interval時隔，duration滑動時長。

接下來是wxss 的樣式（能夠本身調一下）：

/* 輪播圖樣式 */

.carousel_div {
  position: relative;
  width: 100%;
  height: 40%;
}

.swiper {
  position: absolute;
  height: 100%;
  width: 100%;
}

.swiper image {
  height: 100%;
  width: 100%;
}

而後 js 頁中，就在data中 隨便寫個字典就能夠  key：option  value:圖片地址。。 就能夠

（本人頁面使用，須要能夠本身拿走，詳細屬性能夠查看小程序API    https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html）