【微信小程序】swiper轮播图

互联网 2021/4/7 22:08:37

<view class="swiperWrap"><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color=&q…

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


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【微信小程序】swiper轮播图]http://www.zyiz.net/tech/detail-153531.html

上一篇:【微信小程序】tab选项卡

下一篇:史上最全最新微信小程序自动化教程

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程