小程序swiper

swiper用于滑动效果的组件

<swiper>
  <swiper-item wx:for='{{imgs}}'>
    <image src='{{item}}'/>
  </swiper-item>
</swiper>

swiper组件中的swiper-item为单个滑动项

swiper-item中加入这里加入一个for循环, 当然也可以不加入多个<swiper-item>标签

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000' current='4' bindchange='imgchang'>
    <swiper-item>
        <image src='/img/icon/home.png'/>
    </swiper-item>
      <swiper-item>
        <image src='/img/icon/phone.png'/>
    </swiper-item>
    <swiper-item>
        <image src='/img/icon/home.png'/>
    </swiper-item>
    <swiper-item>
        <image src='/img/icon/location.png'/>
    </swiper-item>
    <swiper-item>
        <image src='../img/icon/weichat.png'/>
    </swiper-item>
  </swiper>
</view>

swiper中只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item 也只能放置在<swiper/>组件中，宽高自动设置为100%, 如上这样使用

swiper其它的属性:

indicator-dots 是还显示带圆点来标识

autoplay是否自动滑动(播放)

interval设置自动播放的时间间隔

current页面显示时, 第一次显示在当前位置上的是哪一个swiper-item组件

bindchang在swiper-item组件转换(播放)时触发事件

<view>
  <swiper indicator-dots='true' autoplay='true' interval='2000' current='4'                 
       bindchange='imgchang'>
    <swiper-item>
        <image src='/img/icon/home.png'/>
    </swiper-item>
      <swiper-item>
        <image src='/img/icon/phone.png'/>
    </swiper-item>
    <swiper-item>
        <image src='/img/icon/home.png'/>
    </swiper-item>
    <swiper-item>
        <image src='/img/icon/location.png'/>
    </swiper-item>
    <swiper-item>
        <image src='../img/icon/weichat.png'/>
    </swiper-item>
  </swiper>
</view>

slider组件:

<slider show-value='true' min='0' max='5000' bindchange='sliderBindChange'/>

show-value显示当前值

min最小值

max最大值

bindchange改变值后触发的事件

如下可通过其事件改变swiper的效果(也适用于其它的)

<slider show-value='true' min='0' max='5000' bindchange='sliderBindChange'/>
<button bindtap='autoplayChange'>自动播放切换</button>

如下改是否自动播放和播放快慢

 sliderBindChange : function(e) {
    this.setData({
      interval: e.detail.value
    });
  },

  // 给自动播放autoplay取反
  autoplayChange : function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    });
  },

猜你喜欢