1. 创建一个自定义组件目录，例如 components。
2. 在 components 目录下创建一个视频滑动切换组件的文件，例如 video-slider。
- components/video-slider/video-slider.wxml：
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="swiperChange"
>
<block wx:for="{{videoList}}" wx:key="index">
<swiper-item>
<video
src="{{item.src}}"
poster="{{item.poster}}"
controls="{{item.controls}}"
bindplay="videoPlay"
bindpause="videoPause"
></video>
</swiper-item>
</block>
</swiper>
- components/video-slider/video-slider.js：
Component({
properties: {
videoList: {
type: Array,
value: [],
},
indicatorDots: {
type: Boolean,
value: true,
},
autoplay: {
type: Boolean,
value: true,
},
interval: {
type: Number,
value: 5000,
},
duration: {
type: Number,
value: 500,
},
},
data: {},
methods: {
swiperChange: function (e) {
// 切换到新的视频时的逻辑
},
videoPlay: function (e) {
// 视频播放时的逻辑
},
videoPause: function (e) {
// 视频暂停时的逻辑
},
},
});
- components/video-slider/video-slider.wxss：
swiper-item {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
video {
width: 100%;
height: 100%;
}
3. 在需要使用视频滑动切换组件的页面中引入该组件。
<video-slider videoList="{{videoList}}" indicatorDots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}"></video-slider>
在相应的 JS 文件中，你需要定义 videoList 数组来存储不同视频的信息，例如视频地址 src、封面图 poster 等。
Page({
data: {
videoList: [
{ src: 'video1.mp4', poster: 'poster1.jpg', controls: true },
{ src: 'video2.mp4', poster: 'poster2.jpg', controls: true },
// 其他视频信息...
],
},
});
这是一个简单的视频滑动切换组件的示例。你可以根据实际需求定制更多的样式和交互效果，以满足项目的需求。在实际开发中，请参考小程序文档以获取更多配置和功能选项。
转载请注明出处：http://www.zyzy.cn/article/detail/1344/微信小程序