更新记录

1.0.6（2024-05-07）

支持H5

1.0.5（2024-05-06）

修改说明文档

1.0.3（2024-05-06）

测试代码有个样式漏加了 :class="'video-' + index"

平台兼容性

其它平台我没测试，有需要的可自行下载测试

tcy-video

直接看测试代码

<template>
    <page-meta :page-style="'height:100%'"></page-meta>
    <view class="list" v-if="list_data !== null">
        <view class="item" v-for="(item, index) in list_data" :key="index">
            <tcy-video ref="video" :class="'video-' + index" :index="index" :item="item"></tcy-video>
        </view>
    </view>
</template>

<script>
    import tcyVideo from '@/uni_modules/tcy-video/components/tcy-video/tcy-video.vue'
    export default {
        components: {
            'tcy-video': tcyVideo
        },
        data() {
            return {
                // 列表数据
                list_data: [],

                // 测试数据
                text_data: [{
                        title: "维他奶低糖原味豆奶植物蛋白饮料 250ml*24盒低糖营养早餐豆奶家庭备货",
                        poster: "https://jvod.300hu.com/img/2024/517276855/1/img2.jpg",
                        src: "https://jvod.300hu.com/vod/product/e17d9578-b8bc-47d3-8655-2d595a658e21/365a20697e7d4f3680c166a7a81812f4.mp4?source=1&h265=1059h_07d377657.mp4"
                    },
                    {
                        title: "泓一  香葱苏打饼干咸味休闲零食整箱1000g 【葱香四溢】香葱苏打饼干 1kg",
                        poster: "https://jvod.300hu.com/img/2021/54364091/1/img2.jpg",
                        src: "https://jvod.300hu.com/vod/product/ba74ed28-bb63-4678-8af3-e8541af03d66/c07fde39507f47e59dfef75c5d0da04c.mp4?source=2&h265=h265/18799/ede73ee5b5a04965bf932ecd450a047c.mp4"
                    },
                    {
                        title: "好孩子（gb）婴儿纱布浴巾毛巾新生儿浴巾纱布 纯暇时刻·蓝（95*95CM）礼盒装",
                        poster: "https://img.300hu.com/4c1f7a6atransbjngwcloud1oss/661fa8cb348450719160459265/imageSampleSnapshot/1597813170_704604000.100_5278.jpg",
                        src: "https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/661fa8cb348450719160459265/v.f30.mp4?source=1&h265=v.f1022_h265.mp4"
                    },
                    {
                        title: "方太（FOTILE）抽吸油烟机灶具套装 侧吸式变频烟灶23大风量智能巡航挥手5.2kW燃气灶01-JCD10TA+02-TH27B天然气",
                        poster: "https://jvod.300hu.com/img/2022/221041030/1/img2.jpg",
                        src: "https://jvod.300hu.com/vod/product/8f8c0c6b-78b3-4006-8757-0f4560e0e69a/ae539acb8ae3412080b5d229c33f79e4.mp4"
                    },
                    {
                        title: "东北大板猫山王榴莲 脆皮冰淇淋 87g*5支  量贩装 生鲜 冷饮 冰激凌",
                        poster: "https://jvod.300hu.com/img/2024/491376873/1/img2.jpg",
                        src: "https://jvod.300hu.com/vod/product/1383ab2e-179d-49a2-b725-4048fb6c03ab/5519e424af8646a5930e7a2185e326c0.mp4?source=1&h265=1059h_cfa37f004.mp4"
                    },
                    {
                        title: "Smart Games爱思极 钻石迷阵 8岁-成人 逻辑推理数独 儿童男孩女孩益智玩具",
                        poster: "https://img10.360buyimg.com/pop/jfs/t1/61881/6/19247/76492/63eb43e4Ffa9e53a1/b37d163ae8be5325.png",
                        src: "https://jvod.300hu.com/vod/product/54b3d25a-c263-42f8-b123-6af648c6d0ca/669e79a3b7b94f28a07cba04dd62268f.mp4?source=2&h265=h265/113074/e43407efec8549e79dd0158a3b34b0e5.mp4"
                    },
                    {
                        title: "雪花啤酒（Snowbeer）晶粹 330ml*24听 整箱装 劲爽清冽 ",
                        poster: "https://img10.360buyimg.com/videocover/jfs/t1/147823/26/16581/121249/5fc89732Ed8fdb075/52429b9de5bca480.jpg",
                        src: "https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/76e6d383386905361657896961/v.f30.mp4?source=1&h265=v.f1022_h265.mp4"
                    },
                    {
                        title: "创维（Skyworth）油烟机 欧式顶吸式吸油烟机家用 T型爆炒大吸力抽油烟机 自清洗挥手体感触控 黑色 Y1H",
                        poster: "https://img10.360buyimg.com/pop/jfs/t1/196762/12/36939/45736/64e9dd97F697168f9/ebc3af34d19d0126.png",
                        src: "https://jvod.300hu.com/vod/product/7cfee524-61c8-449d-a65d-62ea8a5c423e/561f14e07dc642d994257df9210e5082.mp4?h265=v.f1059_h265.mp4"
                    },
                    {
                        title: "RAOYI护龈软毛牙刷 深度清洁家庭装待客牙刷 护龈12支",
                        poster: "https://img10.360buyimg.com/pop/jfs/t1/91199/25/45485/45427/660b5e03F9f242e58/02ab303eafad160d.png",
                        src: "https://jvod.300hu.com/vod/product/4d5b45db-aca7-4a88-98c0-ccf4dec02994/c1d9b6c9141a4ba6883c8666844b7d02.mp4?source=1&h265=1059h_1fefe13a0.mp4"
                    },
                    {
                        title: "中科存 SSD固态硬盘 2.5英寸 SATA3.0 高速读写 台式机/笔记本电脑通用 稳定耐用 [512GB]朱雀系列|SATA3.0",
                        poster: "https://jvod.300hu.com/img/2024/496523297/1/img2.jpg",
                        src: "https://jvod.300hu.com/vod/product/4ed62855-cae0-4939-9281-7dcecf0a138a/f53f074cf7534e56a43729c2246f12c5.mp4?source=1&h265=1059h_3b4860911.mp4"
                    }
                ],
            }
        },
        onLoad() {
            // 获取列表数据
            this.getListData()
        },
        onPullDownRefresh() {
            this.list_data = []
            this.getListData()
            setTimeout(function() {
                uni.stopPullDownRefresh()
            }, 300)
        },
        onReachBottom() {
            this.getListData()
        },
        methods: {
            // 获取列表数据
            getListData() {
                console.log('获取数据', this.text_data)
                this.text_data.forEach((item, index) => {
                    this.list_data.push(item)
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .item {
        margin-bottom: 20px;
    }
</style>