专栏首页测试开发架构之路微信小程序轮播图

微信小程序轮播图

swiper标签

<!--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>
//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 () {  
 }  
})
/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端之bootstrap模态框

      简介:模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。...

    互联网金融打杂
  • 记我的一次电话面试

    昨天晚上突如其来一个广东深圳座机电话,第一感觉是骚扰电话。可是接通后对方说“我是腾讯公司的。。。”,瞬间懵逼,原来这就是传说中的电话面试,人生第一次就这样献给了...

    互联网金融打杂
  • C++之类和对象的使用(一)

      对象的初始化 在声明类时直接对数据成员初始化是错误的!下面的例子时错误的!! class Time{ hour =0; minitu=0; sec=0; }...

    互联网金融打杂
  • ArrayList源码分析

    可以看到,在构造方法中直接将 elementData 指向 DEFAULTCAPACITY_EMPTY_ELEMENTDATA空数组,这个时候该ArrayLis...

    大王叫下
  • ArrayList 源码分析

    在 Java 中当创建数组时会在内存中划分一块连续的内存,然后当有数据进入的时候会将数据按顺序的存储在这块连续的内存中。当需要读取数组中的数据时,需要提供数组中...

    希希里之海
  • 集合系列 List(二):ArrayList

    ArrayList 是 List 集合的列表经典实现,其底层采用定长数组实现,可以根据集合大小进行自动扩容。

    陈树义
  • 一道面试题引发的思考

    为什么呢?那么我们怎么来发现它背后的秘密呢?答案只有一个:那就是通过源码来解惑(ArrayList部分源码)。

    阿豪聊干货
  • 老师我想问:他们为啥说我没有数据分析思维?

    有同学问“老师,我去面试,被评价为:没有数据分析思维。他们说我偏向销售管理,而不是销售分析。老师我不明白,销售管理和分析区别是啥?”

    接地气的陈老师
  • 360校招实习面经

    笔试完成不久就邮件通知结果了,安排了视频面试。 形式 视频面试 岗位 数据开发(大数据) 一面-技术 在牛客的视频面试平台。上午11:20,一面面试官(男)迟到...

    牛客网
  • 当Uber焦头烂额的时候,它的老对头Lyft宣布成立无人驾驶部门

    镁客网

扫码关注云+社区

领取腾讯云代金券