0
点赞
收藏
分享

微信扫一扫

微信小程序swiper轮播图组件使用


swiper


基础库 1.0.0 开始支持,低版本需做兼容处理。


滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

属性

类型

默认值

必填

说明

最低版本

indicator-dots

boolean

false

是否显示面板指示点

​​1.0.0​​

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

​​1.1.0​​

indicator-active-color

color

#000000

当前选中的指示点颜色

​​1.1.0​​

autoplay

boolean

false

是否自动切换

​​1.0.0​​

current

number

0

当前所在滑块的 index

​​1.0.0​​

interval

number

5000

自动切换时间间隔

​​1.0.0​​

duration

number

500

滑动动画时长

​​1.0.0​​

circular

boolean

false

是否采用衔接滑动

​​1.0.0​​

vertical

boolean

false

滑动方向是否为纵向

​​1.0.0​​

previous-margin

string

"0px"

前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值

​​1.9.0​​

next-margin

string

"0px"

后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值

​​1.9.0​​

display-multiple-items

number

1

同时显示的滑块数量

​​1.9.0​​

skip-hidden-item-layout

boolean

false

是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

​​1.9.0​​

easing-function

string

"default"

指定 swiper 切换缓动动画类型

​​2.6.5​​

bindchange

eventhandle


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

​​1.0.0​​

bindtransition

eventhandle


swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}

​​2.4.3​​

bindanimationfinish

eventhandle


动画结束时会触发 animationfinish 事件,event.detail 同上

​​1.9.0​​

easing-function 的合法值

说明

最低版本

default

默认缓动函数


linear

线性动画


easeInCubic

缓入动画


easeOutCubic

缓出动画


easeInOutCubic

缓入缓出动画


​change​​​事件 ​​source​​ 返回值

从 ​​1.4.0​​​ 开始,​​change​​​事件增加 ​​source​​字段,表示导致变更的原因,可能值如下:


  1. ​autoplay​​ 自动播放导致swiper变化;
  2. ​touch​​ 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。

Bug & Tip

  1. ​tip​​​: 如果在 ​​bindchange​​​ 的事件回调函数中使用 ​​setData​​​ 改变 ​​current​​​ 值,则有可能导致 ​​setData​​​ 被不停地调用,因而通常情况下请在改变 ​​current​​​ 值前检测 ​​source​​ 字段来判断是否是由于用户触摸引起。

示例

wxml

<view class="container">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">指示点</view>
<view class="weui-cell__ft">
<switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">自动播放</view>
<view class="weui-cell__ft">
<switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">衔接滑动</view>
<view class="weui-cell__ft">
<switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">竖向</view>
<view class="weui-cell__ft">
<switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" />
</view>
</view>
</view>
</view>

<view class="page-section page-section-spacing">
<view class="page-section-title">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" />
<view class="page-section-title">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" />
<view class="page-section-title">
<text>前边距(px)</text>
<text class="info">{{previousMargin}}</text>
</view>
<slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />
<view class="page-section-title">
<text>后边距(px)</text>
<text class="info">{{nextMargin}}</text>
</view>
<slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />
</view>
</view>
</view>

js

Page({
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
circular: false,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0
},
changeProperty: function (e) {
var propertyName = e.currentTarget.dataset.propertyName
var newData = {}
newData[propertyName] = e.detail.value
this.setData(newData)
},
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
})
}
})




举报

相关推荐

0 条评论