MiniX自绘渲染跨平台框架

# Swiper 轮播

请扫码查看示例

# 介绍

用于将内容滚动播放。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-swiper" src="@/node_modules/mui-minix/src/swiper/index"></element>
<element name="m-swiper-item" src="@/node_modules/mui-minix/src/swiper-item/index"></element>
<m-swiper class="h-300" autoplay="{{true}}">
  <m-swiper-item class="b-brand f-j-c f-a-c">
    <text class="txt f-s-24 c-white">1</text>
  </m-swiper-item>
  <m-swiper-item class="b-success f-j-c f-a-c">
    <text class="txt f-s-24 c-white">2</text>
  </m-swiper-item>
  <m-swiper-item class="b-gray-offline f-j-c f-a-c">
    <text class="txt f-s-24 c-white">3</text>
  </m-swiper-item>
  <m-swiper-item class="b-warning f-j-c f-a-c">
    <text class="txt f-s-24 c-white">4</text>
  </m-swiper-item>
</m-swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.h-300{
  height:300px;
}

.b-brand{
  background-color: #267aff;
}

.b-success{
  background-color: #25cf42;
}

.b-gray-offline{
  background-color: #7c879b;
}

.b-warning{
  background-color: #ff8225;
}

.f-a-c{
  align-items: center;
}

.f-j-c{
  justify-content:center;
}

.f-s-24{
  font-size:24px;
}

.c-white{
  color: #ffffff;
}

.txt{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 垂直滚动

通过设置 vertical 属性,可以控制滚动方向为垂直方向。

<element name="m-swiper" src="@/node_modules/mui-minix/src/swiper/index"></element>
<element name="m-swiper-item" src="@/node_modules/mui-minix/src/swiper-item/index"></element>
<m-swiper class="h-300" autoplay="{{true}}">
  <m-swiper-item class="b-brand f-j-c f-a-c">
    <text class="txt f-s-24 c-white">1</text>
  </m-swiper-item>
  <m-swiper-item class="b-success f-j-c f-a-c">
    <text class="txt f-s-24 c-white">2</text>
  </m-swiper-item>
  <m-swiper-item class="b-gray-offline f-j-c f-a-c">
    <text class="txt f-s-24 c-white">3</text>
  </m-swiper-item>
  <m-swiper-item class="b-warning f-j-c f-a-c">
    <text class="txt f-s-24 c-white">4</text>
  </m-swiper-item>
</m-swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.h-300{
  height:300px;
}

.b-brand{
  background-color: #267aff;
}

.b-success{
  background-color: #25cf42;
}

.b-gray-offline{
  background-color: #7c879b;
}

.b-warning{
  background-color: #ff8225;
}

.f-a-c{
  align-items: center;
}

.f-j-c{
  justify-content:center;
}

.f-s-24{
  font-size:24px;
}

.c-white{
  color: #ffffff;
}

.txt{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 不显示Indicator

通过设置 show-indicator 属性, 可以控制是否显示 indicator。

<element name="m-swiper" src="@/node_modules/mui-minix/src/swiper/index"></element>
<element name="m-swiper-item" src="@/node_modules/mui-minix/src/swiper-item/index"></element>
<m-swiper class="h-300" autoplay="{{true}}" show-indicator="{{false}}">
  <m-swiper-item class="b-brand f-j-c f-a-c">
    <text class="txt f-s-24 c-white">1</text>
  </m-swiper-item>
  <m-swiper-item class="b-success f-j-c f-a-c">
    <text class="txt f-s-24 c-white">2</text>
  </m-swiper-item>
  <m-swiper-item class="b-gray-offline f-j-c f-a-c">
    <text class="txt f-s-24 c-white">3</text>
  </m-swiper-item>
  <m-swiper-item class="b-warning f-j-c f-a-c">
    <text class="txt f-s-24 c-white">4</text>
  </m-swiper-item>
</m-swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.h-300{
  height:300px;
}

.b-brand{
  background-color: #267aff;
}

.b-success{
  background-color: #25cf42;
}

.b-gray-offline{
  background-color: #7c879b;
}

.b-warning{
  background-color: #ff8225;
}

.f-a-c{
  align-items: center;
}

.f-j-c{
  justify-content:center;
}

.f-s-24{
  font-size:24px;
}

.c-white{
  color: #ffffff;
}

.txt{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Api

# Swiper

# Prop

字段 说明 类型 默认值 是否必须
index 显示默认页的索引 number 0 是
autoplay 是否自动轮播 boolean false 否
interval 使用自动播放时播放的时间间隔，单位为ms number 3000 否
loop 是否循环轮播 boolean true 否
duration 子组件切换的动画时长 number 1000 否
vertical 是否为纵向滑动，纵向滑动时采用纵向的指示器 boolean false 否
scroll-effect 滑动效果。目前支持如下：spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。none：滑动到边缘后无效果。 string spring 否
display-model 设置当swiper容器在主轴上尺寸（水平滑动时为宽度，纵向滑动时为高度）大于子组件时，在swiper里的呈现方式。可选值："stretch":拉伸子组件主轴上尺寸与Swiper容器一样大。"autoLinear":保持子组件本身大小线性排列在Swiper容器里。 string autoLinear 否
show-indicator 是否显示指示器 boolean true 否
indicator-color 指示器默认颜色 string #c7c7cc 否
active-indicator-color 指示器激活颜色 string #ffffff 否
indicator-size 指定其大小 number 4 否
border-radius 指定容器圆角大小 string 16px 否

# Methods

名称 参数 说明
swipeTo index:number 滚动到指定页
showNext - 滚动到前一页
showPrevious - 滚动到后一页

# Events

名称 说明 回调参数
m-change 切换页面时触发 index: number