码迷,mamicode.com
首页 > 微信 > 详细

微信小程序之轮播图的实现(附效果图和源码)

时间:2018-08-07 01:34:53      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:view   cimage   swipe   -o   信息   fun   tps   onload   class   

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

效果图:

技术分享图片

step1:页面index.wxml代码

<!--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>

step2:配置信息

//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"
        },
        {
          "id": 3,
          "imgurl": "../../images/a3.jpg"
        },
        {
          "id": 4,
          "imgurl": "../../images/a4.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

step3:样式文件

/**index.wxss**/

/*轮播控件*/

.home-swiper {
  width: 95%;
  height: 360rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}
GitHub项目源代码及下载地址:轮播图

微信小程序之轮播图的实现(附效果图和源码)

标签:view   cimage   swipe   -o   信息   fun   tps   onload   class   

原文地址:https://www.cnblogs.com/YYW303/p/9427812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!