Skip to main content

scroll-view

Last updated on

scroll-view là một container component có thể scroll được. Thanh scroll ngoài cùng không ảnh hưởng gì đến thanh scroll của scroll-view.

Lưu ý
  • Bạn cần thiết lập thuộc tính height cho scroll-view thông qua inline-style hoặc tcss nếu scroll-x là true
  • scroll-view không hỗ trợ cả scroll-xscroll-y cùng lúc, khi cả 2 thuộc tính này là true, thanh scroll sẽ không hoạt động
  • scroll-view chỉ hỗ trợ bạn scroll content được hay không, không có tùy chỉnh cho việc pull-down refresh
  • Để dùng thuộc tính scroll-into-view bạn cần để các component vào bên trong thẻ view và khai báo id cho nó
  • Không nên dùng dùng onScroll để thiết lập giá trị của scroll-top hoặc scroll-left qua biến trong data, có thể dẫn đến trường hợp thanh scroll bị giật

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
classstringTên của class
stylestringInline style
scroll-xbooleanfalseCho phép scroll theo chiều ngang
scroll-ybooleanfalseCho phép scroll theo chiều dọc
scroll-topnumber0Giá trị khởi tạo vị trí của thanh scroll dọc
scroll-leftnumber0Giá trị khởi tạo vị trí của thanh scroll ngang
scroll-into-viewstringScroll tới phần tử con với id bằng với giá trị của scroll-into-view. Giá trị của scroll-into-view được ưu tiên hơn scroll-topscroll-left. scroll-into-view chỉ áp dụng cho thẻ view
scroll-with-animationbooleanfalseSử dụng animation khi scroll
trap-scrollbooleanfalseKhi thanh scroll đang ở trên cùng hoặc ở dưới cùng, thì hàm onScroll sẽ không được gọi. Thiết lập giá trị trap-scrolltrue nếu bạn vẫn muốn onScroll được gọi
upper-thresholdnumber50Khoảng cách từ top/left của scroll-view để kích hoạt hàm onScroll
lower-thresholdnumber50Khoảng cách từ bottom/right của scroll-view để kích hoạt hàm onScroll
trap-scrollbooleanfalseKhi thanh scroll đang ở trên cùng hoặc ở dưới cùng, thì hàm onScroll sẽ không được gọi. Thiết lập giá trị trap-scrolltrue nếu bạn vẫn muốn onScroll được gọi
onScrollToUppereventSự kiện được gọi khi thanh scroll tới vị trí trên đầu hoặc ngoài cùng bên trái của scroll-view
onScrollToLowereventSự kiện được gọi khi thanh scroll tới vị trí dưới cùng hoặc ngoài cùng bên phải của scroll-view
onScrolleventSự kiện được gọi khi đang scroll, event.detail = { scrollLeft, scrollTop, scrollHeight, scrollWidth }
onTouchStarteventSự kiện được gọi khi bắt đầu chạm vào scroll-view. Xem thêm
onTouchmoveeventSự kiện được gọi khi bạn di chuyển trong lúc chạm vào scroll-view. Xem thêm
onTouchEndeventSự kiện được gọi khi dừng chạm vào scroll-view. Xem thêm

Sample Code

Xem code mẫu trên Tini Studio
index.txml
<view>
<block-header title="Usage" description="Scroll view component" />

<view class="block-content">
<view class="page-section-title">vertical scroll</view>
<scroll-view
scroll-y="{{true}}"
style="height: 200px;"
onScrollToUpper="upper"
onScrollToLower="lower"
onScroll="scroll"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}">
<view id="blue" class="scroll-view-item bc_blue"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="green" class="scroll-view-item bc_green"></view>
</scroll-view>
</view>
<view class="taps">
<view class="tap" onTap="tap">next</view>
<view class="tap" onTap="tapMove">move</view>
<view class="tap" onTap="scrollToTop">scrollToTop</view>
</view>
</view>
index.js
const order = ['blue', 'red', 'green', 'yellow'];

Page({
data: {
toView: 'red',
scrollTop: 100
},
onLoad() {
this.scroll = debounce(this.scroll.bind(this), 100);
},
upper(e) {
console.log('upper', e);
},
lower(e) {
console.log('lower', e);
},
scroll(e) {
console.log('scroll', e);
},
scrollToTop(e) {
console.log(e);
this.setData({
scrollTop: 0
});
},
tap() {
for (let i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
const next = (i + 1) % order.length;
this.setData({
toView: order[next],
scrollTop: next * 200
});
break;
}
}
},
tapMove() {
this.setData({
scrollTop: this.data.scrollTop + 10
});
}
});
index.tcss
.page-section-title {
padding: 16rpx 32rpx;
}

.tap {
flex: 1;
height: 84rpx;
display: flex;
align-items: center;
justify-content: space-around;
color: #49a9ee;
}

.bc_blue {
background-color: #49a9ee;
}

.bc_red {
background-color: #f04134;
}

.bc_yellow {
background-color: #ffbf00;
}

.bc_green {
background-color: #00a854;
}

.scroll-view-item {
height: 200px;
}

.taps {
display: flex;
flex-direction: row;
}