Customize carousel

Mọi người cho em hỏi làm thế nào để:

  1. customize style của dots trong carousel
  2. Quy định số item hiển thị trên carousel
    Em cám ơn
  1. Customize indicator dots:

Các properties để chỉnh sửa indicatorDots của carousel bạn có thể xem ở đây:

Ngoài ra bạn có thể làm indicatorDots của riêng bạn bằng cách ẩn default dots đi:

<carousel onChange="onChange" indicator-dots="{{false}}">
 . . . 
</carousel>

Tạo một biến để lưu index của item hiện tại carousel đang scroll tới:

Component({
  data: { currentIndex: 0 },
  methods: {
    onChange(event) {
      this.setData({
        currentIndex: event.detail.current,
      });
    },
  },
});

Dựa vào currentIndex đánh active cho các dot theo carousel-item:

<carousel onChange="onChange" indicator-dots="{{false}}">
   <carousel-item>
      <view class="item red">
        <text>1</text>
      </view>
    </carousel-item>
   . . . 
</carousel>
<view class="container">
    <view class="dot {{currentIndex === 0 && 'active'}}"></view>
    <view class="dot {{currentIndex === 1 && 'active'}}"></view>
    . . .
</view>

Bước cuối cùng là thêm style cho các dots theo ý tưởng của riêng bạn, ví dụ:

.dot {
  background-color: #eee;
  border: 1px solid #666;
  border-radius: 5px;
  box-shadow: inset 1px 1px 1px #888;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.dot.active {
  background-color: #41abe5;
  box-shadow: inset 2px 0px 2px -2px #333;
}

Kết quả ví dụ:
ezgif-7-bd58b3d6d873

  1. Quy định số item hiển thị trên carousel

Carousel không có property nào để quy định số item hiển thị. Nhưng bạn có thể chọn render các item từ một mảng items và giới hạn lại như ví dụ sau(hiển thị tối đa 4 items):

<carousel>
    <carousel-item tiki:for="{{items.slice(0, 4)}}" tiki:key="id">
     . . .
    </carousel-item>
</carousel>
1 Like

cám ơn @thien.ly , em làm đc r :smiley:

1 Like