swiper的理解

---

一、swiper是什么？

1.swiper的理解

• uniapp中的滑块视图容器。一般使用于轮播图、滑动切屏
• swiper标签的默认样式：width：100%; height：150px;

2.swiper参数

参数	说明
@change	current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy
@animationfinish	动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}
current	当前所在滑块的 index
autoplay	是否自动切换
interval	自动切换时间间隔
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色
active-class	swiper-item 可见时的 class
current-item-id	当前所在滑块的 item-id ，不能与 current 被同时指定
circular	是否采用衔接滑动，即播放到末尾后重新回到开头
duration	滑动动画时长

3.使用

	<swiper class="swiper"
	:current="current" 
	duration="200"
	@change="onchange">
	</swiper>

二、相关联

1.swiper-item

• 仅可以放置在 swiper 组件中，宽高自动设置为100%（相对于父组件，其不能被子组件自动撑开）
• swiper高度无法由swiper-item撑开(swiper的默认高度是固定的150px)
• 因为swiper组件的元素swiper-item是设置了绝对定位的，所以里面的内容是无法撑开swiper的

2.scroll-view

• 可滚动视图区域。用于区域滚动。

参数	说明
scroll-x	允许横向滚动
scroll-y	允许纵向滚动
upper-threshold	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	设置竖向滚动条位置
scroll-left	设置横向滚动条位置
show-scrollbar	控制是否出现滚动条
refresher-enabled	开启自定义刷新
refresher-triggered	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
refresher-background	设置自定义下拉刷新区域背景颜色
refresher-default-style	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式

触发事件	说明
@scrolltoupper	滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	滚动到底部/右边，会触发 scrolltolower 事件
@scroll	滚动时触发
@refresherpulling	自定义下拉刷新控件被下拉
@refresherrefresh	自定义下拉刷新被触发
@refresherrestore	自定义刷新被复位
@refresherabort	自定义刷新被中止

• 实例

<scroll-view scroll-y="true" 
:style="{height:fixHeight + 'rpx'}" 
lower-threshold="100"
@scrolltolower="tolower" 
refresher-enabled="true"
@refresherrefresh="onRefresh"
:refresher-triggered="triggered
class="scroll">
</scroll-view>