AliSwiper：增强的快应用 swiper 插件

使用方式

<import name="ali-swiper" src="/node_modules/ali-swiper/dist-npm/aliswiper.bundle.ux"></import>
<template>
    <ali-swiper id="ali-swiper-sdk" play-list="{{playList}}" initial-index="0"> <ali-swiper/>
</template>
<script>
    export default {
        private: {
            playList: [
                { type: 'video', url: 'https://xxx', relatedList: [{ url: '' }] },
                { type: 'video', url: 'https://xxx', relatedList: [{ url: '' }] }
            ]
        }
    }
</script>

参数

| prop | type | explanation | default value | |---|---|---|---| | play-list | Array|playItem[] | playItem: { url: string, relatedList: [ { url: string } ]}播放列表数组参数platList，是一个由playItem组成的数组。playItem结构包含两个变量：url与relatedList。url是每个视频的播放地址，string类型，必选参数。relatedList用于页面跳转时的预加载优化，数组类型，非必选参数。数组项为Object类型，仅包含一个名为url的string类型变量，形如：{ url: 'xxx' }举例，传入如下playList 到 'play-list' prop中playList = [ { url: 'https://video1-1.mp4', relatedList: [{ url: 'https://video1-2.mp4' }] }, { url: 'https://video2-1.mp4', relatedList: [{ url: 'https://video2-2.mp4' }] }]此时，会生成长度为2的滑动列表，播放'video1-1.mp4'与'video2-1.mp4'。当播放'video1-1.mp4'时，ali-swiper会自动预加载下一个视频'video2-1.mp4'。当视频'video1-1.mp4'播放进度接近完成时，ali-swiper会额外预加载relatedList传入的'video1-2.mp4'，以备页面跳转之需。页面跳转后，重新初始化ali-swiper，如果此时播放的首个视频是'video1-2.mp4'，首帧速度体验将得到保证。 | [] | | initial-index | number|string | 0 | '0'播放列表初始位置（序号index）。仅支持初始化时传入，后续将由SDK内部管理。如果需要主动切换当前播放的视频，请使用方法swipeTo(index)。 | 0 | | play-mode | 'auto-play-next' | 字符串枚举类型，目前仅支持'auto-play-next'表示播放完成时，自动播放下一集，传入其他则无效。 | '' | | debug | boolean | 是否开启debug模式，开启后ali-swiper界面会显示当前视频与预加载视频等信息，帮助开发调试。 | false | | reach-top-text | string | 滑动到顶部时的提示文案 | '已经滑到顶啦～' | | reach-bottom-text | string | 滑动到底部时的提示文案 | '已经滑到底啦～' | | play-failed-hint-text | string | 播放出错时的提示文案 | '网络不好...请重试' | | license | string | 49位的licenseKey | '' |

方法

| Name | Params | explanation | |---|---|---| | swipeTo | index: number | 将ali-swiper切换到第index视频进行播放。 |

事件

| Event | Params | explanation | |---|---|---| | change | index: number | 当前视频发生变化时触发，index表示当前视频序号。 | | reach-top | index: number | 滑动到顶部时触发，index表示当前视频序号。 | | reach-bottom | index: number | 滑动到顶部时触发，index表示当前视频序号。 | | canplay | index: number | 当前视频缓冲到可播放时触发，index表示当前视频序号。 | | play | index: number | 视频开始播放时触发，包括暂停后再次播放，index表示当前视频序号。 | | pause | index: number | 视频暂停时触发，index表示当前视频序号。 | | timeupdate | index: number, currentTime: number | 视频播放进度发生变化时触发，index表示当前视频序号，currentTime表示当前播放时长。 | | ended | index: number | 视频播放完成时触发，index表示当前视频序号。 |