SlugTeam

# Swiper 滑页 0.14.0+

用于实现滑页效果

# 用法

# 基础用法

<template>
  <sui-swiper key-name="url" :list="images">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 属性

# list

  • 类型：Array
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

用于实现滑页的数据数组，数组的项数为页数

# infinite 0.14.2+

  • 类型：Boolean
  • 默认值：true
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :infinite="false">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

控制是否开启无限滑动效果，即左滑滑到最后一页后继续左滑，可滑动至第一页，右滑滑动到第一页后继续右滑，可滑动至最后一页

# key-name

  • 类型：String
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

可唯一标识数据数组项的字段

# index

  • 类型：Number
  • 默认值：0
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :index="1">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

设置组件初始化时默认为第几页，从 0 计数

# isShowTab

  • 类型：Boolean
  • 默认值：false
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :isShowTab="true">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
    <template #prev>
      <span>&lt;</span>
    </template>
    <template #next>
      <span>&gt;</span>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
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

isShowTab设置为"true"可使用 prve 和 next 插槽

# isShowBullets

  • 类型：Boolean
  • 默认值：false
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :isShowBullets="true" active="active">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
    <template #bullets="{ index }">
      <span>{{ index }}</span>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
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

isShowBullets设置为true时，可以使用bullets插槽；isShowBullets要搭配active使用

# active

  • 类型：String
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :isShowBullets="true" active="active">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
    <template #bullets="{ index }">
      <span>{{ index }}</span>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
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

active用来接收类名，设置在bullets插槽的父元素上，为当前元素激活状态下的样式；active要搭配isShowBullets使用

# 插槽

# default

  • 参数：
    • {Object} item - 完整数据项
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

默认插槽，用于自定义核心渲染结构

# prev、next

  • 参数：无
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :isShowTab="true">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
    <template #prev>
      <span>&lt;</span>
    </template>
    <template #next>
      <span>&gt;</span>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
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

左右插槽，点击可以左、右切换轮播图

# bullets

  • 参数：
    • {Number} index - 轮播图下标
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" :isShowBullets="true" active="active">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
    <template #bullets="{ index }">
      <span class="index">{{ index }}</span>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },
  }
</script>
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

底部插槽，轮播图下方的圆点效果，点击可切换到对应下标的轮播图片

# 事件

# change

  • 参数：
    • {Number} - 当前页码，从 0 计数
  • 用法：
<template>
  <sui-swiper key-name="url" :list="images" @change="changeSwiper">
    <template #default="{ item }">
      <div>{{ item.url }}</div>
    </template>
  </sui-swiper>
</template>

<script>
  export default {
    data() {
      return {
        images: [
          {
            url: '//tiem-cdn.qq.com/sy/wmsj/ingame/images/background.jpg',
          },
          {
            url: '//tiem-cdn.qq.com/sy/3s/ingame/images/background.jpg',
          },
        ],
      }
    },

    methods: {
      changeSwiper(index) {
        console.log(`第${index + 1}页`)
      },
    },
  }
</script>
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

滑页导致页码发生变化时触发

← SwiperImage 图片查看器 →