您的位置:首页 > 移动开发 > 微信开发

【微信小程序】swiper轮播图

2021-04-07 21:19 836 查看

<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,      // 滑动动画时长


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: