微信小程序——轮播图实现

小程序的轮播图，也就是他其中的一个控件可以算是直接上代码：

这是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）

转载于:https://www.cnblogs.com/nnqwbc/p/8126262.html