大飞

大飞 关注TA

挑战一切!

大飞

大飞

关注TA

挑战一切!

  • 加入社区3,250天
  • 写了333,609字

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


微信小程序——轮播图

发布于 2017/01/25 21:04 1,349浏览 0回复 1,074

      微信小程序的轮播图真是爽歪歪啊,不到二十行代码搞定,相对于安卓简单多了,不下百行代码,问题又多。下面见效果图:



视图层:

<swiper class="swiper" autoplay="true" interval="2000" circular="true" indicator-dots="true">
  <block wx:for="{{imageList}}">
    <swiper-item>
      <image src="{{item}}" class="swiper_item"></image>
    </swiper-item>
  </block>
</swiper>

控制层:

var util = require('../../../utils/util.js')
Page({
    data: {
        imageList: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
            'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg',
            'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg',
            'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg',
            'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'
        ]
    },

})

  真是so easy 啊!

本文标签
 {{tag}}
点了个评