|
组件说明:
可滚动视图区域。
组件用法：纵向滚动用法
Tip:
-
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。
-
当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）
-
当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
-
<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
-
<view id="green" class="scroll-view-item bc_green"></view>
-
<view id="red" class="scroll-view-item bc_red"></view>
-
<view id="yellow" class="scroll-view-item bc_yellow"></view>
-
<view id="blue" class="scroll-view-item bc_blue"></view>
-
</scroll-view>
-
<view class="btn-area">
-
<button size="mini" bindtap="tap">click me to scroll into view </button>
-
<button size="mini" bindtap="tapMove">click me to scroll</button>
-
</view>
js
-
var order = ['red', 'yellow', 'blue', 'green', 'red']
-
Page({
-
data: {
-
toView: 'green',
-
scrollTop: 100,
-
scrollLeft: 0
-
},
-
//滚动条滚到顶部的时候触发
-
upper: function(e) {
-
console.log(e)
-
},
-
//滚动条滚到底部的时候触发
-
lower: function(e) {
-
console.log(e)
-
},
-
//滚动条滚动后触发
-
scroll: function(e) {
-
console.log(e)
-
},
-
//点击按钮切换到下一个view
-
tap: function(e) {
-
for (var i = 0; i < order.length; ++i) {
-
if (order[i] === this.data.toView) {
-
this.setData({
-
toView: order[i + 1]
-
})
-
break
-
}
-
}
-
},
-
//通过设置滚动条位置实现画面滚动
-
tapMove: function(e) {
-
this.setData({
-
scrollTop: this.data.scrollTop + 10
-
})
-
}
-
})
css
-
.scroll-view_H{
-
white-space: nowrap;
-
}
-
.scroll-view-item{
-
height: 200px;
-
}
-
.scroll-view-item_H{
-
display: inline-block;
-
width: 100%;
-
height: 200px;
-
}
横向滚动用法
Tip:
-
横向滚动无法使用scroll-into-view属性。
-
当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）
-
当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）
效果图：
wxml
-
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-left="{{scrollLeft}}">
-
<view id="green" class="scroll-view-item_H bc_green"></view>
-
<view id="red" class="scroll-view-item_H bc_red"></view>
-
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
-
<view id="blue" class="scroll-view-item_H bc_blue"></view>
-
</scroll-view>
js
-
var order = ['red', 'yellow', 'blue', 'green', 'red']
-
Page({
-
data: {
-
toView: 'green',
-
scrollTop: 100,
-
scrollLeft: 0
-
},
-
//滚动条滚到顶部的时候触发
-
upper: function(e) {
-
console.log(e)
-
},
-
//滚动条滚到底部的时候触发
-
lower: function(e) {
-
console.log(e)
-
},
-
//滚动条滚动后触发
-
scroll: function(e) {
-
console.log(e)
-
},
-
//点击按钮切换到下一个view
-
tap: function(e) {
-
for (var i = 0; i < order.length; ++i) {
-
if (order[i] === this.data.toView) {
-
this.setData({
-
toView: order[i + 1]
-
})
-
break
-
}
-
}
-
},
-
//通过设置滚动条位置实现画面滚动
-
tapMove: function(e) {
-
this.setData({
-
scrollLeft: this.data.scrollLeft + 10
-
})
-
}
-
})
wxss
-
.scroll-view_H{
-
white-space: nowrap;
-
}
-
.scroll-view-item{
-
height: 200px;
-
}
-
.scroll-view-item_H{
-
display: inline-block;
-
width: 100%;
-
height: 200px;
-
}
主要属性：
|
属性
|
类型
|
默认值
|
描述
|
|
scroll-x
|
Boolean
|
false
|
允许横向滚动
|
|
scroll-y
|
Boolean
|
false
|
允许纵向滚动
|
|
upper-threshold
|
Number
|
50
|
距顶部/左边多远时（单位px），触发 scrolltoupper 事件
|
|
lower-threshold
|
Number
|
50
|
距底部/右边多远时（单位px），触发 scrolltolower 事件
|
|
scroll-top
|
Number
|
|
设置竖向滚动条位置
|
|
scroll-left
|
Number
|
|
设置横向滚动条位置
|
|
scroll-into-view
|
String
|
|
值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
|
|
bindscrolltoupper
|
EventHandle
|
|
滚动到顶部/左边，会触发 scrolltoupper 事件
|
|
bindscrolltolower
|
EventHandle
|
|
滚动到底部/右边，会触发 scrolltolower 事件
|
|
bindscroll
|
EventHandle
|
|
滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
|
|
