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

swiper滑块组件说明:
  • 滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换
 
组件的使用示例的运行效果如下:
微信小程序组件解读和分析:三、swiper滑块视图

 

下面是WXML代码:
[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
[/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



下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
page({
  data: {
    imgUrls: [
    ],
    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
    })
  }
})


wxss

[CSS] 纯文本查看 复制代码
1
2
3
4
.swiper-item{
    display: block;
    height: 150px;
}


主要属性:

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

属性
类型
默认值
描述
indicator-dots
Boolean
false
是否显示面板指示点
autoplay
Boolean
false
是否自动切换
current
Number
当前所在页面的 index
interval
Number
5000
自动切换时间间隔
duration
Number
1000
滑动动画时长
bindchange
EventHandle
 
current 改变时会触发 change 事件,event.detail = {current: current}
点击查看原文

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

上一篇:[转]Python 之 使用 PIL 库做图像处理


下一篇:微信小程序组件解读和分析:十三、radio单选项目