微信小程序轮播图 swiper图片组件

最新推荐文章于 2025-05-14 08:00:24 发布

原创最新推荐文章于 2025-05-14 08:00:24 发布 · 10w+ 阅读

96 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #swiper #微信开发者工具 #轮播图 #微信开发

微信小程序同时被 2 个专栏收录

44 篇文章

订阅专栏

微信小程序开发

42 篇文章

订阅专栏

本文介绍了一种使用微信小程序实现简易轮播图的方法。通过简单的代码即可完成轮播图功能，包括设置自动播放、间隔时间和过渡效果。文章提供了完整的wxml和js代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

<!--index.wxml-->  
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
      <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
    </swiper>

这里有几个属性需要说明.

微信小程序开发的循环用到了<block wx:for >

我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    movies:[  
    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
    ]  
  },  
  onLoad: function () {  
  }  
})

3.WXML

/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}

WXSS不多说,跟CSS没啥区别.

不明白的看看开发文档

http://blog.youkuaiyun.com/qq_31383345