Rumah > applet WeChat > Pembangunan program mini > 解读和分析微信小程序组件:三、swiper滑块视图

解读和分析微信小程序组件:三、swiper滑块视图

巴扎黑
Lepaskan: 2017-03-19 18:27:06
asal
2159 orang telah melayarinya

swiper滑块组件说明:

  • 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换

下面是WXML代码:

[XML] 纯文本查看 复制代码

[/align]
<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>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Salin selepas log masuk

下面是JS代码:

[JavaScript] 纯文本查看 复制代码

page({
  data: {
    imgUrls: [
      &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})
Salin selepas log masuk

[CSS] 纯文本查看 复制代码

.swiper-item{
    display: block;
    height: 150px;
}
Salin selepas log masuk

主要属性:

  • 设置界面的内容样式,用于wxml

属性

类型

默认值

描述

indicator-dots

Boolean

false

是否显示面板指示点

autoplay

Boolean

false

是否自动切换

current

Number

0

当前所在页面的 index

interval

Number

5000

自动切换时间间隔

duration

Number

1000

滑动动画时长

bindchange

EventHandle


current 改变时会触发 change 事件,event.detail = {current: current}

Atas ialah kandungan terperinci 解读和分析微信小程序组件:三、swiper滑块视图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan