【微信小程序】swiper轮播图

【微信小程序】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,      // 滑动动画时长


上一篇:All About Debian /etc/network/interfaces File


下一篇:剑指 Offer 44. 数字序列中某一位的数字