scroll-view
可滚动视图区域
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| scroll-x | Boolean | false | 否 | 允许横向滚动 | |
| scroll-y | Boolean | false | 否 | 允许纵向滚动 | |
| upper-threshold | Number/String | 50 | 否 | 距顶部/左边多远时，触发 scrolltoupper 事件 | |
| lower-threshold | Number/String | 50 | 否 | 距底部/右边多远时，触发 scrolltolower 事件 | |
| scroll-top | Number/String | 否 | 设置竖向滚动条位置 | ||
| scroll-left | Number/String | 否 | 设置横向滚动条位置 | ||
| scroll-into-view | String | 否 | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 | ||
| scroll-with-animation | Boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | |
| enable-back-to-top | Boolean | false | 否 | iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 | |
| enable-flex | Boolean | false | 否 | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 | |
| bindscrolltoupper | EventHandle | 否 | 滚动到顶部/左边时触发 | ||
| bindscrolltolower | EventHandle | 否 | 滚动到底部/右边时触发 | ||
| bindscroll | EventHandle | 否 | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
代码示例
<!--pages/component/pages/scroll-view/scroll-view.mcml-->
<view class="container">
<view class="statement">可滚动视图区域。支持横向或竖向滚动。</view>
<view class="title">横向滚动</view>
<view class="cssname">scroll-x：true，scroll-y：false</view>
<scroll-view scroll-x style="overflow:hidden !important" scroll-with-animation="true" scroll-into-view="{{xToView}}" scroll-left="{{scrollLeft}}" class="scroll-view-x">
<view class="view-item1">1</view>
<view id="view-item2" class="view-item2">2</view>
<view class="view-item3">3</view>
</scroll-view>
<view class="scroll-option" >
<view bindtap="setScrollLeft" hover-class="view-option-hover">scroll-left</view>
<view bindtap="setScrollIntoViewX" hover-class="view-option-hover">scroll-into-view</view>
</view>
<view class="title">竖向滚动</view>
<view class="cssname">scroll-x：false，scroll-y：true</view>
<scroll-view scroll-y class="scroll-view-y" scroll-into-view="{{yToView}}" scroll-top="{{scrollTop}}" >
<view class="view-item1">1</view>
<view id="view-item2" class="view-item2">2</view>
<view class="view-item3">3</view>
</scroll-view>
<view class="scroll-option">
<view bindtap="setScrollTop" hover-class="view-option-hover">scroll-top</view>
<view bindtap="setScrollIntoViewY" hover-class="view-option-hover">scroll-into-view</view>
</view>
<view class="cssname">enable-back-to-top: true</view>
<scroll-view scroll-y class="scroll-view-y" scroll-with-animation="{{true}}" enable-back-to-top="{{true}}" >
<view class="view-item1">1</view>
<view id="view-item2" class="view-item2">2</view>
<view class="view-item3">3</view>
</scroll-view>
<view class="title">双向滚动</view>
<view class="cssname">scroll-x：true，scroll-y：true</view>
<scroll-view scroll-x scroll-y enable-flex="true"
bindscroll="onScroll"
bindscrolltoupper="onScrolltoupper"
bindscrolltolower="onScrolltolower"
scroll-x="true" class="scroll-view-xy">
<view class="view-item1">1</view>
<view class="view-item2">2</view>
<view class="view-item3">3</view>
</scroll-view>
<view class="cssname">bindscroll: 滚动时触发，参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindScroll}}</text>
<view class="cssname">bindscrolltoupper: 滚动到顶部/左边时触发，参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindscrolltoupper}}</text>
<view class="cssname">bindscrolltolower: 滚动到底部/右边时触发，参数event.detail</view>
<text space="nbsp" user-select="true" class="scrollDetail">{{bindscrolltolower}}</text>
</view>
// pages/component/pages/scroll-view/scroll-view.js
Page({
data: {
scrollLeft: 0,
scrollTop: 0,
bindScroll: '滚动scroll-view显示event.detail参数',
refresherTriggered: false,
bounces: false,
showScrollbar: false,
pagingEnabled: false,
fastDeceleration: false,
yToView: '',
xToView: '',
bindscrolltoupper: '',
bindscrolltolower: ''
},
refresherTriggered: function(){
this.setData({
refresherTriggered: !this.data.refresherTriggered
})
},
setScrollLeft: function(){
this.setData({
scrollLeft: '300rpx'
})
},
setScrollTop: function () {
this.setData({
scrollTop: '250rpx'
})
},
setScrollIntoViewX: function(){
this.setData({
xToView: 'view-item2',
scrollLeft: '300rpx'
})
},
setScrollIntoViewY: function () {
this.setData({
yToView: 'view-item2'
})
},
onScroll: function(event){
this.setData({
bindScroll: JSON.stringify(event, null, 2)
})
},
onScrolltoupper: function(event){
this.setData({
bindscrolltoupper: JSON.stringify(event, null, 2)
})
},
onScrolltolower: function(event){
this.setData({
bindscrolltolower: JSON.stringify(event, null, 2)
})
},
bindrefresherpulling: function(event){
this.setData({
bindrefresherpulling: JSON.stringify(event, null, 2)
})
},
bindrefresherrefresh: function(event){
this.setData({
bindrefresherrefresh: JSON.stringify(event, null, 2)
})
},
bindrefresherrestore: function(event){
this.setData({
bindrefresherrestore: JSON.stringify(event, null, 2)
})
},
bindrefresherabort: function(event){
this.setData({
bindrefresherabort: JSON.stringify(event, null, 2)
})
},
binddragstart: function(event){
this.setData({
binddragstart: JSON.stringify(event, null, 2)
})
},
binddragging: function(event){
this.setData({
binddragging: JSON.stringify(event, null, 2)
})
},
binddragend: function(event){
this.setData({
binddragend: JSON.stringify(event, null, 2)
})
},
setBounces: function(){
this.setData({
bounces: !this.data.bounces
})
},
setShowScrollbar: function(){
this.setData({
showScrollbar: !this.data.showScrollbar
})
},
setPagingEnabled: function(){
this.setData({
pagingEnabled: !this.data.pagingEnabled
})
},
setFastDeceleration: function(){
this.setData({
fastDeceleration: !this.data.fastDeceleration
})
}
})
/* pages/component/pages/scroll-view/scroll-view.mcss */
scroll-view{
height: 300rpx;
background:#eeeeee;
}
.scroll-view-x{
white-space:nowrap;
}
.scroll-view-x view{
display: inline-block;
width: 400rpx !important;
height: 100% !important;
}
.scroll-view-y view{
width: 100% !important;
height: 200rpx !important;
}
.scroll-view-xy view{
width: 200% !important;
height: 200rpx !important;
}
.scroll-option{
display: flex;
}
.scroll-option view{
padding: 10rpx;
background-color: #eeeeee;
margin: 10rpx;
flex: 1;
text-align: center;
}