swiper

滑块视图容器

属性

名称	类型	默认值	描述
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	string.ColorString	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	string.ColorString	#000000	当前选中的指示点颜色
disable-touch	boolean	false	是否禁止用户 touch 操作
autoplay	boolean	false	是否自动切换
current	number	0	当前所在滑块的 index
current-item-id	string	-	当前所在滑块的 item-id ，不能与 current 被同时指定
interval	number	3000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动
vertical	boolean	false	滑动方向是否为纵向
@change	(event: SwiperChangeEvent) => void	-	current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	(event: SwiperTransitionEvent) => void	-	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
@animationfinish	(event: SwiperAnimationFinishEvent) => void	-	动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}

事件

SwiperChangeEvent

SwiperChangeEvent 属性值

名称	类型	必填	默认值	描述
detail	SwiperChangeEventDetail	是	-	-
type	string	是	-	事件类型
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

SwiperChangeEventDetail 属性值

名称	类型	必备	默认值	描述
current	number	是	-	-
source	string	是	-	-

SwiperChangeEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

SwiperTransitionEvent

SwiperTransitionEvent 属性值

名称	类型	必填	默认值	描述
detail	SwiperTransitionEventDetail	是	-	-
type	string	是	-	事件类型
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

SwiperTransitionEventDetail 属性值

名称	类型	必备	默认值	描述
dx	number	是	-	-
dy	number	是	-	-

SwiperTransitionEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

SwiperAnimationFinishEvent

SwiperAnimationFinishEvent 属性值

名称	类型	必填	默认值	描述
detail	SwiperAnimationFinishEventDetail	是	-	-
type	string	是	-	事件类型
target	Element	是	-	触发事件的组件
currentTarget	Element	是	-	当前组件
timeStamp	number	是	-	事件发生时的时间戳

SwiperAnimationFinishEventDetail 属性值

名称	类型	必备	默认值	描述
current	number	是	-	-
source	string	是	-	-

SwiperAnimationFinishEvent 方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

示例

hello uni-app x

<template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
   	<!-- #endif -->
   	<view>
   		<page-head title="swiper,可滑动视图"></page-head>
   		<view class="uni-margin-wrap">
   			<swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
         :rebound="reboundSelect"
   				:interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor"
   				:indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal"
   				:current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition"
   				@animationfinish="swiperAnimationfinish">
   				<swiper-item item-id="A">
   					<view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
   				</swiper-item>
   				<swiper-item item-id="B">
   					<view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
   				</swiper-item>
   				<swiper-item item-id="C">
   					<view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
   				</swiper-item>
   			</swiper>
   		</view>
   		<view class="uni-list">
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">是否显示面板指示点</view>
   				<switch :checked="dotsSelect" @change="dotsChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">是否自动切换</view>
   				<switch :checked="autoplaySelect" @change="autoplayChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">是否循环</view>
   				<switch :checked="circularSelect" @change="circularChange" />
   			</view>
       <view class="uni-list-cell uni-list-cell-pd">
       	<view class="uni-list-cell-db">是否显示rebound效果</view>
       	<switch :checked="reboundSelect" @change="reboundSelectChange" />
       </view>
   			<view class="uni-title">间隔时间(毫秒)</view>
   			<view>
   				<slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">定制指示器颜色</view>
   				<switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">纵向</view>
   				<switch :checked="verticalSelect" @change="verticalChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">指定current为最后一个元素</view>
   				<switch :checked="currentSelect" @change="currentChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
   				<switch :checked="currentItemIdSelect" @change="currentItemIdChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">禁止用户 touch 操作</view>
   				<switch :checked="disableTouchSelect" @change="disableTouchChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">swiperTransition 是否打印</view>
   				<switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
   				<switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
   			</view>
   			<view class="uni-list-cell uni-list-cell-pd">
   				<view class="uni-list-cell-db">swiperChange 是否打印</view>
   				<switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
   			</view>
   		</view>
   	</view>
   	<!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
</template>
<script>
   export default {
   	data() {
   		return {
   			background: ['color1', 'color2', 'color3'],
   			dotsSelect: false,
       reboundSelect:false,
   			autoplaySelect: false,
   			circularSelect: false,
   			indicatorColorSelect: false,
   			verticalSelect: false,
   			currentSelect: false,
   			currentItemIdSelect: false,
   			intervalSelect: 2000,
   			indicatorColor: "",
   			indicatorColorActive: "",
   			currentVal: 0,
   			currentItemIdVal: "",
   			disableTouchSelect: false,
   			swiperTransitionSelect: false,
   			swiperAnimationfinishSelect: false,
   			swiperChangeSelect: false,
       currentValChange:0
   		}
   	},
   	methods: {

   		swiperChange: function (e : SwiperChangeEvent) {
       this.currentValChange = e.detail.current
       console.log(this.currentValChange)
   			if (this.swiperChangeSelect) {
   				console.log("swiperChange")
   				console.log(e)
   			}
   		},
   		swiperTransition: function (e : SwiperTransitionEvent) {
   			if (this.swiperTransitionSelect) {
   				console.log("swiperTransition")
   				console.log(e)
   			}
   		},
   		swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
   			if (this.swiperAnimationfinishSelect) {
   				console.log("swiperAnimationfinish")
   				console.log(e)
   			}
   		},

   		dotsChange: function (e : SwitchChangeEvent) {
   			this.dotsSelect = e.detail.value
   		},
   		swiperTransitionChange: function (e : SwitchChangeEvent) {
   			this.swiperTransitionSelect = e.detail.value
   		},
   		swiperChangeChange: function (e : SwitchChangeEvent) {
   			this.swiperChangeSelect = e.detail.value
   		},
   		swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
   			this.swiperAnimationfinishSelect = e.detail.value
   		},
   		autoplayChange: function (e : SwitchChangeEvent) {
   			this.autoplaySelect = e.detail.value
   		},
   		verticalChange: function (e : SwitchChangeEvent) {
   			this.verticalSelect = e.detail.value
   		},
   		disableTouchChange: function (e : SwitchChangeEvent) {
   			this.disableTouchSelect = e.detail.value
   		},
   		currentItemIdChange: function (e : SwitchChangeEvent) {
   			this.currentItemIdSelect = e.detail.value
   			if (this.currentItemIdSelect) {
   				this.currentItemIdVal = 'C'
   			} else {
   				this.currentItemIdVal = 'A'
   			}
   		},
   		currentChange: function (e : SwitchChangeEvent) {
   			this.currentSelect = e.detail.value
   			if (this.currentSelect) {
   				this.currentVal = 2
   			} else {
   				this.currentVal = 0
   			}

   		},
   		circularChange: function (e : SwitchChangeEvent) {
   			this.circularSelect = e.detail.value
   			console.log(this.circularSelect)
   		},
     reboundSelectChange: function (e : SwitchChangeEvent) {
     	this.reboundSelect = e.detail.value
     	console.log(this.reboundSelect)
     },
   		sliderChange(e : SliderChangeEvent) {
   			this.intervalSelect = e.detail.value
   		},
   		indicatorColorChange(e : SwitchChangeEvent) {
   			this.indicatorColorSelect = e.detail.value
   			if (this.indicatorColorSelect) {
   				// 选择了定制指示器颜色
   				this.indicatorColor = "#ff00ff"
   				this.indicatorColorActive = "#0000ff"
   			} else {
   				// 没有选择颜色
   				this.indicatorColor = ""
   				this.indicatorColorActive = ""
   			}
   		}
   	}
   }
</script>

<style>
   .uni-margin-wrap {
   	width: 690rpx;
   	width: 100%;
   	;
   }

   .swiper {
   	height: 300rpx;
   }

   .swiper-item {
   	width: 100%;
   	height: 300rpx;
   }

   .swiper-item-Text {
   	width: 100%;
   	text-align: center;
   	line-height: 300rpx;
   }
</style>

兼容性

	安卓系统版本	安卓 uni-app	安卓 uni-app-x	iOS 系统版本	iOS uni-app	iOS uni-app-x
swiper	5.0	√	3.9+	9.0	√	x
indicator-dots	5.0	√	3.9+	9.0	√	x
indicator-color	5.0	√	3.9+	9.0	√	x
indicator-active-color	5.0	√	3.9+	9.0	√	x
disable-touch	5.0	√	3.9+	9.0	√	x
autoplay	5.0	√	3.9+	9.0	√	x
current	5.0	√	3.9+	9.0	√	x
current-item-id	5.0	√	3.9+	9.0	√	x
interval	5.0	√	3.9+	9.0	√	x
circular	5.0	√	3.9+	9.0	√	x
vertical	5.0	√	3.9+	9.0	√	x
@change	5.0	√	3.9+	9.0	√	x
@transition	5.0	√	3.9+	9.0	√	x
@animationfinish	5.0	√	3.9+	9.0	√	x

子组件

• swiper-item

参见

• Reference

swiper-item

swiper的唯一合法子组件。每个swiper-item代表一个滑块。宽高自动设置为100%

属性

名称	类型	默认值	描述
item-id	string	-	该 swiper-item 的标识符

兼容性

	安卓系统版本	安卓 uni-app	安卓 uni-app-x	iOS 系统版本	iOS uni-app	iOS uni-app-x
swiper-item	5.0	√	3.9+	9.0	√	x
item-id	5.0	√	3.9+	9.0	√	x

参见

• Reference