# scroll-view
可滚动视图区域。用于区域滚动。
# 使用示例
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-title">scroll-view 区域滚动</view>
<view class="bz-padding-wrap">
<demo-cell title="纵向滚动" noPadding></demo-cell>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view id="demo1" class="scroll-view-item bz-bg-red">A</view>
<view id="demo2" class="scroll-view-item bz-bg-green">B</view>
<view id="demo3" class="scroll-view-item bz-bg-blue">C</view>
</scroll-view>
</view>
<view @tap="scrollToTop" class="demo-padding-wrap">
<bz-divider text="点击这里返回顶部"></bz-divider>
</view>
<demo-cell title="横向滚动" noPadding></demo-cell>
<view>
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view id="demo1" class="scroll-view-item_H bz-bg-red">A</view>
<view id="demo2" class="scroll-view-item_H bz-bg-green">B</view>
<view id="demo3" class="scroll-view-item_H bz-bg-blue">C</view>
</scroll-view>
</view>
<view class="bz-common-pb"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0
}
},
methods: {
upper (e){
},
lower (e) {
},
scrollToTop(e) {
this.scrollTop = this.oldScrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
},
scroll(e) {
this.oldScrollTop = e.detail.scrollTop
}
}
}
</script>
<style lang="scss" scoped>
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
</style>
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number/String | 50 | 距顶部/左边多远时（单位 px），触发 scrolltoupper 事件 |
| lower-threshold | Number/String | 50 | 距底部/右边多远时（单位 px），触发 scrolltolower 事件 |
| scroll-top | Number/String | 设置竖向滚动条位置 | |
| scroll-left | Number/String | 设置横向滚动条位置 | |
| scroll-into-view | String | 值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | |
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
| refresher-enabled | Boolean | false | 开启自定义下拉刷新 |
| refresher-threshold | Number | 45 | 设置自定义下拉刷新阈值 |
| refresher-default-style | String | "black" | 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 |
| refresher-background | String | "#FFF" | 设置自定义下拉刷新区域背景颜色 |
| refresher-triggered | Boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 |
| @scrolltoupper | EventHandle | 滚动到顶部/左边，会触发 scrolltoupper 事件 | |
| @scrolltolower | EventHandle | 滚动到底部/右边，会触发 scrolltolower 事件 | |
| @scroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | |
| @refresherpulling | EventHandle | 自定义下拉刷新控件被下拉 | |
| @refresherrefresh | EventHandle | 自定义下拉刷新被触发 | |
| @refresherrestore | EventHandle | 自定义下拉刷新被复位 | |
| @refresherabort | EventHandle | 自定义下拉刷新被中止 |
使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。
注意：
- scroll-into-view 的优先级高于 scroll-top。
- scroll-view 是区域滚动，不会触发页面滚动，无法触发 pages.json 配置的下拉刷新、页面触底 onReachBottomDistance、titleNView 的 transparent 透明渐变
- scroll-into-view 可以使用任意子元素的id，如果动态加载列表的，必须保证在设置
scroll-into-view时，列表确保对应id的数据已被加载完毕，否则会导致无滚动效果出现 - 如果在scroll-view中使用z-index控制子元素的层级，请将.kz-scroll-view设置为
-webkit-overflow-scrolling: unset;在safari中.kz-scroll-view中的-webkit-overflow-scrolling: touch会导致z-index设置失效。如果您需要保障平滑的滑动效果，请将高层级的弹窗、蒙层放到最外层的容器中承载。否则在ios中会出现层级设置失效的问题（同safari浏览器的h5效果）
← swiper match-media →