微信小程序开发-1【swiper图片轮播】

2017-09-23    标签:微信小程序    阅读:425   


小程序图片轮播广告效果要用到滑块视图容器,即swiper

swiper滑块视图容器。(具体请看小程序开发文档)

属性名类型默认值说明最低版本
indicator-dotsBooleanfalse是否显示面板指示点
indicator-colorColorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorColor#000000当前选中的指示点颜色1.1.0
autoplayBooleanfalse是否自动切换
currentNumber0当前所在页面的 index
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
circularBooleanfalse是否采用衔接滑动
verticalBooleanfalse滑动方向是否为纵向
bindchangeEventHandle
current 改变时会触发 change 事件,event.detail = {current: current, source: source}


案例:

在.wxml文件里面添加:

<view>
    <swiper indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>
</view>

添加到.js文件里面【data】

data: {
     imgUrls: [      
     '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'
        ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
    },

效果:

1506155236127045.png

【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/30.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

授人以鱼不如授人以渔!授人以鱼只救一时之急,授人以渔则可解一生之需!

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×