short-videos-view

Introduction

A scrollable container for short videos. It is used in conjunction with the native-video component to implement short video functionality, primarily for handling the switching of videos.

Property Description

Property Name	Type	Default	Required	Description
scroll-with-animation	Boolean	FALSE	No	Specifies whether to use animation when switching videos.
scroll-animation-duration	Number	200	No	The duration (in milliseconds) of the animation when switching videos.
scroll-damping-coefficient	Number	0	No	The damping coefficient for page scrolling when swiping with a finger.
toggle-threshold	Number	0.2	No	The threshold for switching videos when swiping.
vertical	Boolean	true	No	Specifies whether to scroll vertically.
active-index	Number	0	No	Sets the index of the currently displayed video.
onchange	EventHandle	-	No	Triggered when the video is switched. The index and current index are passed as parameters.

Examples

<short-videos-view
  :scroll-with-animation="scrollWithAnimation"
  :scroll-damping-coefficient="scrollDampingCoefficient"
  :toggle-threshold="toggleThreshold"
  :break-auto-scroll="breakAutoScroll"
  bind:onchange="onChange"
>
  <view>
    <view class="item" :key="index" s-for="(item, index) in list"
      >{{ item }}</view
    >
  </view>
</short-videos-view>

Page({
  data: {
    list: [1, 2, 3],
    scrollWithAnimation: true,
    scrollDampingCoefficient: 0.4,
    toggleThreshold: 0.05,
    breakAutoScroll: false,
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        list: [1, 2, 3],
      });
    }, 2000);
  },
  onChange(index) {
    const { list } = this.data;
    const len = list.length;
    if (index >= len - 2 && len < 18) {
      this.setData({
        list: list.concat([len + 1, len + 2, len + 3]),
      });
    }
    console.log('index===', index);
  },
  onPullDownRefresh() {
    this.setData({
      list: [1, 2, 3],
    });
    setTimeout(() => {
      dlt.stopPullDownRefresh();
    }, 200);
  },
  onReachBottom() {
    setTimeout(() => {
      dlt.stopPullUpRefresh();
      dlt.showToast('no more data');
    }, 200);
  },
});

.item {
  width: 100vw;
  height: 100vh;
}

.item:nth-child(3n) {
  background: #0081ff;
}
.item:nth-child(3n + 1) {
  background: #00d7ae;
}
.item:nth-child(3n + 2) {
  color: #191f2b;
  background: #e4e6eb;
}