SlugTeam

# Scroll 滚动

用于实现局部滚动，配合阻止全局 touchmove 事件的默认行为使用。

# 用法

# 基础用法

<sui-scroll>
  <!-- 内容 -->
</sui-scroll>
1
2
3

# 横向滚动

<sui-scroll horizontal>
  <!-- 内容 -->
</sui-scroll>
1
2
3

# 下拉刷新

<template>
  <sui-scroll pull-down @refresh="refresh">
    <!-- 内容 -->
  </sui-scroll>
</template>

<script>
  export default {
    methods: {
      refresh() {
        console.log('触发下拉刷新')
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果示例：

# 属性

# horizontal 0.13.0+

  • 类型：Boolean
  • 默认值：false
  • 用法：
<sui-scroll horizontal>
  <!-- 内容 -->
</sui-scroll>
1
2
3

是否为水平滚动

# overflow 0.12.1-

  • 类型：String
  • 默认值：y
  • 用法：
<sui-scroll overflow="x">
  <!-- 内容 -->
</sui-scroll>
1
2
3

滚动方向，可选值：

可选值 描述
x 横向滚动
y 纵向滚动

# pull-down 0.17.2+

  • 类型：Boolean
  • 默认值：false
  • 用法：
<sui-scroll pull-down>
  <!-- 内容 -->
</sui-scroll>
1
2
3

是否开启下拉刷新，horizontal = false 时才有效，下拉刷新时会触发 refresh 事件

效果示例：

# onReachEndDistance

  • 类型：Number
  • 默认值：200
  • 用法：
<sui-scroll :onReachEndDistance="100">
  <!-- 内容 -->
</sui-scroll>
1
2
3

# container-class 0.17.4+

  • 类型：String
  • 用法：
<sui-scroll container-class="sui-scroll--container">
  <!-- 内容 -->
</sui-scroll>
1
2
3

添加到内部容器的类名

# container-style 0.17.4+

  • 类型：Object String
  • 用法：
<sui-scroll container-style="margin: 20px; background: #ccc;">
  <!-- 内容 -->
</sui-scroll>
1
2
3

添加到内部容器的样式

效果示例：

# colors 0.17.2+

  • 类型：Object
  • 用法：
<sui-scroll :colors="{ 3: '#4c84ff' }">
  <!-- 内容 -->
</sui-scroll>
1
2
3

自定义主题色，优先级最高，可覆盖 默认主题 与 全局配置 设置的主题色，相关色号：3

效果示例：

# 事件

# reachEnd

  • 用法：
<template>
  <sui-scroll @reach-end="reachEnd">
    <!-- 内容 -->
  </sui-scroll>
</template>

<script>
  export default {
    methods: {
      reachEnd() {
        console.log('滚动到末尾啦')
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

滚动到末端时触发

# scroll 0.13.0+

  • 参数：
    • {Number} - 滚动距离
    • {Object} - 事件对象
  • 用法：
<template>
  <sui-scroll @scroll="scrollEvent">
    <!-- 内容 -->
  </sui-scroll>
</template>

<script>
  export default {
    methods: {
      scrollEvent(distance, event) {
        console.log(distance, event)
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

滚动时触发

# refresh 0.17.2+

  • 用法：
<template>
  <sui-scroll pull-down @refresh="refresh">
    <!-- 内容 -->
  </sui-scroll>
</template>

<script>
  export default {
    methods: {
      refresh() {
        console.log('触发下拉刷新')
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

下拉刷新时触发，配合 pull-down = true 使用

← Swiper 滑页 →