short-videos-view

简介

短视频滑动容器。配合 native-video(非同层原生视频组件)可实现短视频业务。主要用于处理短视频上下切换视频。

属性说明

属性名	类型	默认值	必填	说明
scroll-with-animation	Boolean	FALSE	否	切换视频时是否使用动画过渡
scroll-animation-duration	Number	200	否	动画过渡时长
scroll-damping-coefficient	Number	0	否	手指滑动时页面滚动的阻尼系数
toggle-threshold	Number	0.2	否	设置切换视频滑动的阈值
vertical	Boolean	true	否	是否垂直滚动
active-index	Number	0	否	设置当前显示 activeIndex 下标的视频
onchange	EventHandle	-	否	视频切换时触发(index, 当前索引)

示例

<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;
}