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

这篇关于【微信小程序】swiper轮播图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！