【微信小程序】组件（二）swiper

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

Crab0314

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

阅读量1k

点赞数

分类专栏：微信小程序开发

本文链接：https://blog.csdn.net/crab0314/article/details/78157850

版权

本文介绍了微信小程序中Swiper组件的使用方法，包括组件效果、JS代码实现、属性配置以及如何控制图片自动播放和指示器显示。示例代码展示了如何设置图片展示大小和swiper容器尺寸，并提供了官方属性说明作为参考。

摘要由CSDN通过智能技术生成

记录一下swiper的使用方法。先看一下效果图 ↓

1.附上js文件的代码，与微信官网上的开发指南基本相同。其中点击“indicator-dots”会触发changeIndicators方法，设置图片下方小点点的可见性。点击“autoplay”按钮则会触发changeAutoplay方法，决定图片是否自动播放。在data中我们对这两个属性，及切换时间（interval）、持续时间(duration)进行初始化。

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: tr