微信小程序开发实现轮播图

小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家

效果图:

1.页面代码

<!--index.wxml-->
<view class="container">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for-items="{{lunboData}}">
      <swiper-item>
        <image src="{{item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
</view>

2.配置信息

//index.js
Page({
  data: {
    //轮播图配置
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/a1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

3.配置样式

/**index.wxss**/
 
/*轮播控件*/
 
.home-swiper {
  width: 95%;
  height: 360rpx;
}
 
.slide-image {
  width: 100%;
  height: 100%;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 微信小程序 swiper组件轮播图详解及实例
  • 微信小程序之swiper轮播图中的图片自适应高度的方法
  • 微信小程序使用swiper组件实现类3D轮播图
  • 微信小程序视图容器(swiper)组件创建轮播图
  • 微信小程序 轮播图swiper详解及实例(源码下载)
  • 微信小程序使用swiper组件实现层叠轮播图
  • 微信小程序实现的3d轮播图效果示例【基于swiper组件】
  • 微信小程序实现轮播图效果
  • 微信小程序实战之轮播图(3)
  • 微信小程序实现Swiper轮播图效果
张贴在2