scroll-view
更新时间：2024-11-13 19:05:26
scroll-view
scroll-view组件
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| style | string | 类型 | ||
| 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-flex | boolean | false | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。和小红书不一样，display-direction 默认是 row，需要开发者在 scroll-view 上设置 flex-direction 为 column | |
| refresher-enabled | boolean | false | 开启自定义下拉刷新 | |
| refresher-threshold | number | 45 | 设置自定义下拉刷新阈值 | |
| refresher-default-style | string | black | 设置自定义下拉刷新默认样式，支持设置 black | |
| refresher-background | string | #FFF | 设置自定义下拉刷新区域背景颜色 | |
| refresher-triggered | boolean | false | 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发。和小红书不一样，开发者需要先将 refresherTriggered 手动置为 true，再置为 false，来触发 refresherrestore 事件，以及隐藏 refresher | |
| show-scrollbar | boolean | true | 滚动条显隐控制 (同时开启 enhanced 属性后生效) | |
| bindscrolltoupper | eventhandle | 滚动到顶部/左边时触发 | ||
| bindscrolltolower | eventhandle | 滚动到底部/右边时触发 | ||
| bindscroll | eventhandle | 滚动时触发 | ||
| bindrefresherpulling | eventhandle | 自定义下拉刷新控件被下拉 | ||
| bindrefresherrefresh | eventhandle | 自定义下拉刷新被触发 | ||
| bindrefresherrestore | eventhandle | 自定义下拉刷新被复位 |
扫码预览
组件示例
html
<view class="page-body">
<view class="page-section">
<view class="page-section-title">
<text>
横向滚动 \n
scroll-left: 200 \n
showScrollbar: false \n
bindscrolltoupper \n
bindscrolltolower \n
scroll-y: true \n
scroll-x: true \n
</text>
</view>
<view class="page-section-spacing">
<scroll-view class="scroll-view_H" showScrollbar="{{false}}" scroll-left="200" bindscrolltoupper="upperHorizontal" bindscrolltolower="lowerHorizontal" scroll-y scroll-x bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H1 demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H1 demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H1 demo-text-3"></view>
<view id="demo4" class="scroll-view-item_H1 demo-text-1"></view>
<view id="demo5" class="scroll-view-item_H1 demo-text-2"></view>
<view id="demo6" class="scroll-view-item_H1 demo-text-3"></view>
</scroll-view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>
纵向滚动 \n
showScrollbar: true \n
scroll-y: true \n
refresher-enabled: true \n
refresher-threshold: 80 \n
refresher-background: lightgreen \n
</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y showScrollbar="{{true}}" style="width: 100%; height: 400px;" refresher-enabled="{{true}}" refresher-threshold="{{80}}" refresher-default-style="none" refresher-background="lightgreen">
<view slot="refresher" class="refresh-container" style="display: block; width: 100%; height: 80px; background: #ECBDF0; display: flex; align-items: center;">
<view class="view1" style="position: absolute; color: white; text-align: center; width: 100%;">下拉刷新</view>
</view>
<view id="demo1" class="scroll-view-item_V demo-text-1"></view>
<view id="demo2" class="scroll-view-item_V demo-text-2"></view>
<view id="demo3" class="scroll-view-item_V demo-text-3"></view>
<view id="demo4" class="scroll-view-item_V demo-text-1"></view>
<view id="demo5" class="scroll-view-item_V demo-text-2"></view>
<view id="demo6" class="scroll-view-item_V demo-text-3"></view>
</scroll-view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>
scroll-y: true \n
refresher-enabled: true \n
refresher-threshold: 100 \n
refresher-default-style: "white" \n
refresher-background: "lightgreen" \n
refresher-triggered: 触发 \n
bindrefresherpulling： 触发 \n
bindrefresherrefresh：触发 \n
bindrefresherrestore：触发 \n
bindrefresherabort：触发 \n
scroll-top="100" \n
</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y style="width: 100%; height: 400px;" scroll-top="100" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="white" refresher-background="lightgreen" refresher-triggered="{{triggered}}" bindrefresherpulling="onPulling" bindrefresherrefresh="onRefresh" bindrefresherrestore="onRestore" bindrefresherabort="onAbort">
<view id="demo1" class="scroll-view-item_V demo-text-1"></view>
<view id="demo2" class="scroll-view-item_V demo-text-2"></view>
<view id="demo3" class="scroll-view-item_V demo-text-3"></view>
<view id="demo4" class="scroll-view-item_V demo-text-1"></view>
<view id="demo5" class="scroll-view-item_V demo-text-2"></view>
<view id="demo6" class="scroll-view-item_V demo-text-3"></view>
</scroll-view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">
<text>
scroll-y="true" \n
bindscrolltoupper 触发 \n
bindscrolltolower 触发 \n
bindscroll 触发 \n
scroll-into-view 触发 滚动到B \n
</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="#case1Demo2">
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<view id="case1Demo2" class="scroll-view-item demo-text-2"></view>
<view id="case1Demo3" class="scroll-view-item demo-text-3"></view>
<view id="demo4" class="scroll-view-item demo-text-1"></view>
<view id="case1Demo5" class="scroll-view-item demo-text-2"></view>
<view id="case1Demo6" class="scroll-view-item demo-text-3"></view>
</scroll-view>
</view>
</view>
</view>
该文档是否对您有帮助？