小程序组件-轮播图

最新推荐文章于 2024-08-21 17:47:57 发布

沐澐

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量553

点赞数 3

分类专栏：小程序文章标签：小程序小程序轮播

本文链接：https://blog.csdn.net/core_song/article/details/81115820

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

根据官方文档，拿到几个关键的属性就能制作小程序轮播了

js:

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true,     //是否自动切换
    vertical: true,    //滑动方向是否为纵向
    circular: true,   //是否采用衔接滑动
    interval: 5000,  //自动切换时间间隔
    duration: 1000  //滑动动画时长
  },
})

wxml:

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"
  style='padding:52rpx;'>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>