微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程

原创 已于 2024-02-21 16:36:57 修改 · 3.4k 阅读 · 20 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#微信小程序 #小程序
于 2024-02-19 17:17:37 首次发布
本文详细介绍了如何在微信小程序中创建一个带有自动播放和循环功能的swiper组件，展示了WXML、wxss和JS代码，以及如何处理视频播放和全屏观看操作。
该文章已生成可运行项目，

静态效果：

 进入下面小程序可以体验效果，点击底部 看剧 栏目 

 一、创建小程序组件

二、代码

1、WXML

<view class="swiper-wrapper">
    <swiper
    class="main-sw"
    autoplay="{{false}}"
    circular="{{true}}"
    interval="{{5000}}" 
    duration="{{500}}"
    current="{{posterList.length>2?1:0}}"
    previous-margin="255rpx"
    next-margin="255rpx"
    bindchange="swiperChange"
    >
    <block wx:for="{{posterList}}" wx:key="index">
        <swiper-item >
            <view class="swiper-item {{currentIndex==index?'swiper-item-active':'swiper-item-noactive'}}">
                <video
                class="vie" 
                id="{{'at_'+index}}"
                custom-cache="{{false}}"
                autoplay="{{currentIndex==index}}"
                data-index="{{index}}"
                bindplay="videoPlaying"
                play-btn-position="center"
                show-bottom-progress="{{false}}"
                loop="{{currentIndex==index}}"
                enable-progress-gesture="{{false}}"
                show-fullscreen-btn="{{false}}"
                show-play-btn="{{currentIndex==index}}"
                show-center-play-btn="{{currentIndex==index}}"
                object-fit="cover" 
                src="{{item.url}}">
                    <image wx:if="{{currentIndex!=index}}" style="width: 100%;" mode="aspectFill" src="{{item.coverUrl}}"></image>
                </video>
                <view wx:if="{{currentIndex==index}}" class="full-vw" data-oj="{{item}}" bind:tap="fullView">点击全屏</view>
            </view>
        </swiper-item>
    </block>
    </swiper>
</view>

2、wxss

.swiper-wrapper{
  flex: 1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 20rpx;
  background-image:url(https://pic1.zhimg.com/80/v2-1476ad08ba6e8e0aa062d8a6de699e72_720w.jpeg?source=d16d100b);
  background-size: 100% 100%;
}
.main-sw{
  width: 100%;
  height: 430rpx;
}
 
.swiper-item{
  height: 450rpx;
  display: flex;
  align-items: center;
}
 
.swiper-item .vie{
  width: 180rpx;
  height: 300rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  transition: all 0.6s;
}

.swiper-item-noactive{
    padding-top: 30rpx;
    transition: all 0.6s;
}

.swiper-item-active{
    transition: all 0.6s;
}

.swiper-item-active .vie{
  width: 100%;
  height: 360rpx;
  transition: all 0.6s;
}

.full-vw{
    right: 20rpx;
    width: 130rpx;
    position: fixed;
    bottom: 15rpx;
    color: white;
    border-radius: 50rpx;
    align-items: center;
    justify-content: center;
    margin: 20rpx;
    display: flex;
    font-family: auto;
    font-size: small;
    padding: 2px;
    backdrop-filter: blur(10px);
    background: #65656594;
}

 3、JS

// components/swiper-video/swiper-video.js
Component({
    behaviors: ['wx://component-export'],
    export() {
        return this;
    },
    lifetimes: {
        ready: function() {
        }
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        currentIndex: 1,
        preIndex:-1,
        posterList: [
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/02/15/15/BMjAyNDAyMTUxNTQ0NTNfMjI1MzQ2MDQxMV8xMjUwMDcyMDgyODZfMV8z_b_B5e4c6a553c4e284e7941a0ded6c00abb.mp4?tag=1-1708249770-unknown-0-p3ytzdyhr9-044ff73795d79af2&clientCacheKey=3xypn8bt5vm7w5q_b.mp4&bp=10000&tt=b&ss=vp',
            title:'01',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/01/30/16/BMjAyNDAxMzAxNjQwMzJfMzgyMzQ3MjQ1XzEyMzUyMTMwODU4NF8xXzM=_b_Be0f3bfddfb287f120ec484218179d214.mp4?tag=1-1708249795-unknown-0-4piuyvkt6d-783157ecbf33a1a3&clientCacheKey=3xpwz2fks5az6r4_b.mp4&bp=10000&tt=b&ss=vp',
            title:'02',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/02/17/14/BMjAyNDAyMTcxNDI0NDZfMTI5OTg4NTg4NV8xMjUxODQ5NTczNDRfMF8z_b_B3c596afe9e6ddc96e88d71351da052ac.mp4?tag=1-1708249822-unknown-0-ab5yaqiqon-f89388c9a0fbea5f&clientCacheKey=3x8669dhkxfztyc_b.mp4&bp=10000&tt=b&ss=vp',
            title:'03',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/02/17/17/BMjAyNDAyMTcxNzExMDRfMjM0NzM2OTY3OV8xMjUxOTkzNTUwOTlfMF8z_b_B531ec3a51ae00fdf805e892aefbf6733.mp4?tag=1-1708249852-unknown-0-jde8ia4ef8-80944aff380e6a62&clientCacheKey=3xzj5p23mfrrsm9_b.mp4&bp=10000&tt=b&ss=vp'
            title:'04',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/02/18/11/BMjAyNDAyMTgxMTAyMzdfMTYzNTI5NjEzNV8xMjUyNjE0MjQ4NTJfMF8z_b_B3da4064bfef058d0c2821f64f24d863e.mp4?tag=1-1708249875-unknown-0-oudstqms9g-770ac56e97209131&clientCacheKey=3xfywqaqhr4xav4_b.mp4&bp=10000&tt=b&ss=vp',
            adUrl:'https://kurl01.cn/7wcG5c',
            title:'05',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2023/12/08/14/BMjAyMzEyMDgxNDA1NThfMjEwNjQzMjExMV8xMTkxMTE3NDE1NzVfMV8z_b_Ba62e8a6ff0405a74160c6887700f4d6c.mp4?tag=1-1708177895-unknown-0-9bhguogrkc-94f990275f193667&clientCacheKey=3xsxvbspa44ezue_b.mp4&bp=10000&tt=b&ss=vp',
            title:'06',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/01/17/13/BMjAyNDAxMTcxMzMyMDZfMzg1MTI1NDMwMV8xMjIzMjA4MTg1MzJfMl8z_b_B64de3e477a3c56931c2e1c869455bb8a.mp4?tag=1-1708249935-unknown-0-8hoxqf5mqv-06a7d7fd75d38e4b&clientCacheKey=3xns4fd3r5iw3mq_b.mp4&bp=10000&tt=b&ss=vp',
            adUrl:'https://kurl01.cn/7wcG5c',
            title:'07',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/01/02/19/BMjAyNDAxMDIxOTIxMDNfMzg4MTc4NzIwM18xMjEyMTY2NjYzOTNfMl8z_b_B7243f24b02219e4fafb2aa4e92cc5395.mp4?tag=1-1708249950-unknown-0-p2dy8mumai-fe39fb7133a179af&clientCacheKey=3xjxfvd5cnhip2u_b.mp4&bp=10000&tt=b&ss=vp',
            title:'08',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/02/16/17/BMjAyNDAyMTYxNzU3MTRfMTU2ODQ2MzM2Ml8xMjUxMTA1MDIwMDZfMV8z_b_B74927e5fb4232fc899c57f2e68fa5582.mp4?tag=1-1708249967-unknown-0-vrnqcigp6e-3d0aa458f1aaf315&clientCacheKey=3xu5uaiuju6y5xu_b.mp4&bp=10000&tt=b&ss=vp',
            title:'09',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
          {
            url: 'https://tx2.a.kwimgs.com/upic/2024/01/01/11/BMjAyNDAxMDExMTAxMjhfMTk3MDc5MTUxMV8xMjExMDExOTE1ODVfMV8z_b_B6fc046ba1a3cc0b114ffb7a3feb87c68.mp4?tag=1-1708250014-unknown-0-glxnbdhuvo-79c4b0891fd217ee&clientCacheKey=3x43rid7dz3y7pk_b.mp4&bp=10000&tt=b&ss=vp',
            title:'10',
            coverUrl:'https://pic3.zhimg.com/v2-e392c3b92ab5e833e9b6911d4d512073_r.jpg?source=1940ef5c'
          },
        ]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        //视频切换
        swiperChange(event){
            if(this.data.preIndex>-1){
                var cxt = wx.createVideoContext('at_'+this.data.preIndex, this);
                cxt.stop();
                //将视频重头开始播放
                cxt.seek(10000);
            }
            let {current} = event.detail;
            var cxt = wx.createVideoContext('at_'+current, this);
            cxt.play();
            this.setData({
                currentIndex: current,
                preIndex: current
            })
        },
        //当前正在播放视频
        videoPlaying(e){
            this.setData({
                preIndex: e.currentTarget.dataset.index
            })
        },
        /**
         * 当前视频暂停（父组件可调用）
         */
        videoStop(){
            var cxt = wx.createVideoContext('at_'+this.data.currentIndex, this);
            cxt.stop();
            //将视频重头开始播放
            cxt.seek(10000);
        },
        /**
         * 当前视频播放（父组件可调用）
         */
        videoPlay(){
            var cxt = wx.createVideoContext('at_'+this.data.currentIndex, this);
            cxt.play();
        },
        /**
         * 全屏观看
         */
        fullView(e){
            wx.navigateTo({
                url: '/pages/videoview/videoview',
                success: function(res) {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('acceptDataFromOpenerPage', {
                        oj:e.currentTarget.dataset.oj
                   })
                }
            })
        }
    }
})

本文章已经生成可运行项目
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Garc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值