swiper

滑块视图容器，支持子组件

基础示例

完整单页示例，可直接替换 BlueOS Studio 模板工程的首页 index.ux 运行。<swiper> 内的每个直接子元素是一个滑动页，左右滑动时 change 事件回传当前索引，示例把索引保存到 data 中并显示在底部。

<script>
  export default {
    data: {
      current: 0,
      total: 2,
    },
    onPageChange(evt) {
      this.current = evt.index
    },
  }
</script>

<template>
  <div class="flex flex-col items-center w-full h-full">
    <swiper class="swiper-area w-full" indicator="true" onchange="onPageChange">
      <div class="flex flex-col items-center justify-center w-full h-full">
        <text class="text-white text-4xl">第一页</text>
      </div>
      <div class="flex flex-col items-center justify-center w-full h-full">
        <text class="text-white text-4xl">第二页</text>
      </div>
    </swiper>
    <text class="text-white text-2xl">当前第 {{ current + 1 }} / {{ total }} 页</text>
  </div>
</template>

<style>
@tailwind utilities;

.swiper-area {
  height: 80%;
}
</style>

<swiper> 需要明确的高度，其子元素才能正常撑开。若需要在脚本中控制当前页，可绑定 index="{{current}}" 或调用 swipeTo 方法。

属性

支持通用属性

名称	类型	默认值	必填	描述
index	<number>	0	否	当前显示的子组件索引
indicator	<boolean>	true	否	是否启用 indicator，默认 true
scrollbar	<boolean>	false	否	是否启用滚动条，如果 indicator 启用，则滚动条不会启用
vertical	<boolean>	false	否	滑动方向是否为纵向，纵向时 indicator 也为纵向
previousmargin	<string>	0px	否	前边距，可用于露出前一项的一小部分，支持单位：px 和%
nextmargin	<string>	0px	否	后边距，可用于露出后一项的一小部分，支持单位：px 和%
enableswipe	<boolean>	true	否	是否支持手势滑动 swiper
effect	scroll | fade	scroll	否	滑动动效类型， scroll 为滚动动效，fade 为淡入淡出动效

备注：previousmargin和nextmargin的总和不应该超过整个 swiper 大小的 1/2，超过部分将会被截取。

样式

支持通用样式

名称	类型	默认值	必填	描述
indicator-type	normal | arc	normal	否	indicator 排列形状（普通或者弧形）
indicator-color	<color>	rgba(255, 255, 255, 0.4)	否	indicator 填充颜色
indicator-selected-color	<color>	#ffffff 或者 rgb(255, 255, 255)	否	indicator 选中时的颜色
indicator-size	<length>	12px	否	indicator 组件的直径大小
indicator-[top|left|right|bottom]	<length> | <percentage>	-	否	indicator 相对于 swiper 的位置，indicator-type 为 arc 时，该样式无效
indicator-spacing	<number>	-	否	indicator 间距，indicator-type 为 normal 时指间隔距离，indicator-type 为 arc 时指间隔角度

事件

支持通用事件

名称	参数	描述
change	{index:currentIndex}	当前显示的组件索引变化时触发
scrollbottom	-	滑动到底部或者最右边
scrolltop	-	滑动到顶部或者最左边

方法

名称	参数	描述
swipeTo	Object	swiper 滚动到 index 位置

swipeTo 的参数说明:

名称	类型	是否必选	默认值	备注
index	number	是	无	swiper 滚动到 index 位置
behavior	smooth	instant	auto	否