微信小程序：轮播图（swiper组件）

最新推荐文章于 2024-04-21 18:09:39 发布

rating_

最新推荐文章于 2024-04-21 18:09:39 发布

阅读量539

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/rating_/article/details/95895573

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

轮播图（swiper组件）
在微信小程序中，可以使用滑块视图容器swiper组件来实现图片轮播的效果。
wxml代码：

<!-- 轮播图 -->

    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}" wx:key="lunbo">
        <swiper-item>
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>

js代码：

Page({
  data: {
   imgUrls: [ //循环展示的图片
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: true,  //是否显示指标点
    autoplay: true,  //是否自动播放
    interval: 3000,  //页面切换时间间隔，3000即3秒
    duration: 1000,  //滑动动画时长
}
  //轮播图展示
  onLoad: function() {},
})