Nhảy tới nội dung

carousel

DevTools

Thử tưởng tượng bạn phải hiển thị hàng tá hình ảnh trong một không gian hạn chế. Nếu chọn cách hiển thị tất cả cùng một lúc thì mỗi hình chỉ còn kích thước bé tí, khó lòng thu hút sự chú ý của người dùng. Thậm chí hình ảnh chi chít có thể khiến người ta rối mắt.

Carousel là một container component cho phép bạn tổ chức các phần tử hay còn gọi là item (hình ảnh, video, text, …) theo dạng băng chuyền. Mỗi lần, một hoặc vài item được hiển thị. Người dùng có thể trượt (slide) qua trái/ phải đối với carousel ngang, hoặc trượt lên/ xuống đối với carousel đứng để (tuần tự) xem những item khác. Ngoài ra carousel còn có chế độ trượt tự động - cứ sau một khoảng thời gian, carousel sẽ mặc nhiên trượt đến item tiếp theo.

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

Cú pháp

Thẻ <carousel> định nghĩa một carousel.

Thẻ <carousel-item> định nghĩa item (phần tử) của carousel đó. <carousel-item> phải là thẻ con của <carousel>.

Chi tiết

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
arrowsbooleanfalseHiển thị previous và next arrows
indicator-dotsbooleanfalseCho phép hiển thị dot indicator
indicator-colorstringgray-20Màu sắc của dot indicator
indicator-active-colorstringbrandMàu sắc của dot đang được active
active-classstringThuộc tính này sẽ thêm một lớp (được định nghĩa trong TCSS) cho item đang active
currentnumber0Cho biết item thứ mấy của carousel đang active (được hiển thị). Các item được đánh số bắt đầu từ 0
autoplaybooleanfalseTự động trượt qua các phần tử.
intervalnumber5000(Đơn vị tính mili giây - ms) Thời gian hiển thị một item trước carousel khi trượt qua item tiếp theo.
durationnumber500(Đơn vị tính mili giây - ms) Thời gian diễn ra hiệu ứng đổi item.
verticalnumberfalseCarousel đứng, trượt theo chiều dọc. Bạn cần khai báo chiều cao cho carousel thông qua thuộc tính heightstyle hoặc class
circularbooleanfalseQuy định carousel trượt xoay vòng. Ví dụ carousel có 10 item và circular="true". Nếu trượt theo chiều xuôi, hết item 9, sẽ quay lại item 0. Nếu trượt theo chiều ngược, hết item 0 sẽ chuyển đến item 9.
disable-touchbooleanfalseCho phép user có thể touch được vào carousel để lướt hay không
spacingnumber0Khoảng cách giữa các item (đơn vị tính pixel). Chỉ hỗ trợ từ version 1.74.23
onChangefunctionSự kiện được kích hoạt khi trượt từ item này sang item khác., event.detail = { current }
---oOo---

Indicator dots:

DevTools

Một dãy các chấm tròn mà mỗi chấm đại diện cho một item trên carousel. Nó cho bạn biết có bao nhiêu item hết thảy trên carousel, item nào đang active; cho phép bạn nhảy đến một item bất kỳ mà ko phải trượt qua từng item trung gian.

Sample Code

index.txml

<carousel
arrows
indicator-dots
onChange="onChange"
>
<carousel-item>
<image class="w-full" mode="aspectFill" src="https://picsum.photos/714/327?random=1" />
</carousel-item>
<carousel-item>
<image class="w-full" mode="aspectFill" src="https://picsum.photos/714/327?random=2" />
</carousel-item>
<carousel-item>
<image class="w-full" mode="aspectFill" src="https://picsum.photos/714/327?random=3" />
</carousel-item>
</carousel>

index.js

Page({
data: {},
onChange(e) {
console.log('onChange: ', e);
}
});