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

时间 2019-11-12

标签微信程序实现繁體版

原文原文链接

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

这是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滑动时长。xss

接下来是wxss 的样式（能够本身调一下）：ide

/* 轮播图样式 */

.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:图片地址。。就能够spa

（本人页面使用，须要能够本身拿走，详细属性能够查看小程序API https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html）debug