Represents a scrollable view area, equivalent to a div element with its overflow property set in web development.
Since: 1.0.0
When enabling vertical scrolling, you need to set height through CSS to provide a fixed height for scroll-view. The default length unit of the component properties is px.
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
scroll-x | boolean | false | No | Whether to allow horizontal scrolling. |
scroll-y | boolean | false | No | Whether to allow vertical scrolling. |
upper-threshold | number/string | 50 | No | Distance from the top or left edge to trigger the scrolltoupper event. |
lower-threshold | number/string | 50 | No | Distance from the bottom or right edge to trigger the scrolltolower event. |
scroll-top | number/string | - | No | Position of the vertical scrollbar. |
scroll-left | number/string | - | No | Position of the horizontal scrollbar. |
scroll-into-view | string | - | No | ID of the sub-element to scroll to. The value cannot start with a digit. The view scrolls to that element in the direction specified as scrollable. |
scroll-with-animation | boolean | false | No | Whether to use animation transitions when setting the scrollbar position. |
show-scrollbar | boolean | true | No | Whether to display the scrollbar. |
refresher-enabled | boolean | false | No | Whether to enable custom pull-to-refresh. |
refresher-threshold | number | 45 | No | Custom pull-to-refresh threshold. |
refresher-default-style | string | "black" | No | Default style for pull-to-refresh. The value can be black, white, or none (default style not used). |
refresher-background | string | - | No | Background color of the custom pull-to-refresh area. The default color is transparent. |
refresher-triggered | boolean | false | No | Pull-to-refresh status. The value true indicates that the pull-to-refresh has been triggered, while false indicates it has not. |
Name | Parameter | Description |
|---|---|---|
bindscrolltoupper | event | Event triggered when scrolling to the top or left edge. |
bindscrolltolower | event | Event triggered when scrolling to the bottom or right edge. |
bindscroll | event | Event triggered during scrolling, with event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}. |
bindrefresherpulling | eventhandle | Event handler triggered when the pull-to-refresh component is pulled down. |
bindrefresherrefresh | eventhandle | Event handler triggered when the pull-to-refresh is activated. |
bindrefresherrestore | eventhandle | Event handler triggered when the pull-to-refresh is restored. |
bindrefresherabort | eventhandle | Event handler triggered when the pull-to-refresh is aborted. |
HXML file:
<scroll-view
scroll-y="{{scrollY}}"
style="height: 520px"
upper-threshold="50"
lower-threshold="30px"
bindscrolltoupper="upper"
bindscrolltolower="lower"
>
<view id="demo1" class="scroll-view-item demo-text-1">1</view>
<view id="demo2" class="scroll-view-item demo-text-2">2</view>
<view id="demo3" class="scroll-view-item demo-text-3">3</view>
</scroll-view> JS file:
Page({
data: {
scrollY: true,
},
upper(e) {
console.log("upper function triggered");
},
lower(e) {
console.log("lower function triggered");
},
});