微信小程序-轮播图

yanyanforest

于 2017-11-23 09:48:47 发布

阅读量414

点赞数

分类专栏：微信小程序

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/yanyanforest/article/details/78610612

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Swiper官网地址

Demo:不自动滚动、衔接播放。
.wxml

<view class='section'>
  <swiper class="scroll-view_H" indicator-dots="true" indicator-active-color="#ff6700" autoplay="{{false}}" duration='500' circular='true' bindchange='swiperChanged'>
    <block wx:for="{{slides}}" wx:key="item">
      <swiper-item bindtap="tapSwiperItem">
        <image class='scroll-view-item-H' src='{{item.ad_image_url}}'></image>
      </swiper-item>
    </block>
  </swiper>
</view>

.wxss

.scroll-view_H {
  top: 10px;
  left: 0px;
  border-color: red;
  width: 100%;
  height: 240px;
  background-color: rosybrown;
}

.scroll-view-item-H {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}