【微信小程序】swiper轮播图

<view class="swiperWrap">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#fff">
      <block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index">
        <swiper-item>
          <image class="" src="{{item}}"></image>
        </swiper-item>
      </block>
    </swiper>
</view>

data:

imgUrls: [
  '/images/ad1.jpg',
  '/images/ad2.jpg',
  '/images/ad3.jpg',
  '/images/ad4.jpg',
  '/images/ad5.jpg',
  '/images/ad6.jpg',
  '/images/ad7.jpg',
],
indicatorDots: true, // 是否显示面板指示点
autoplay: true,      // 是否自动切换
circular: true,      // 是否采用衔接滑动
interval: 3000,      // 自动切换时间间隔
duration: 1000,      // 滑动动画时长

swiper轮播图官网

posted @ 2021-02-01 21:57  星河几重  阅读(106)  评论(0编辑  收藏  举报