更新记录

1.1.8（15527649518） 下载此版本

  • 更换视频链接
  • 修复暂停问题 1.1.7（15527649518） 下载此版本
  • 更新uniapp框架到最新版本
  • 更换视频链接 1.1.6（15527649518） 下载此版本
  • 修复悬浮层消失的问题
  • 优化播放第N个视频的体验 平台兼容性
  • uni-app(3.6.10)
  • Vue2
  • Vue3
  • Chrome
  • Safari
  • app-vue
  • app-nvue
  • Android
  • iOS
  • 鸿蒙
  • 支付宝小程序
  • 抖音小程序
  • 百度小程序
  • 快手小程序
  • 京东小程序
  • 鸿蒙元服务
  • QQ小程序
  • 飞书小程序
  • 小红书小程序
  • 快应用-华为
  • 快应用-联盟
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • √
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • - 全局仅渲染3个swiper-item，无论加载多少数据都能实现丝滑滚动。该功能适用于Vue3和Vue2，如有需要请自行修改。同时，该插件还具备自动预加载视频的功能，首次渲染时优化了性能。 快速开始，下载插件后请按照此方法运行调试：npm inpm run dev:mp-weixinnpm run build:mp-weixindist/dev/mp-weixin 参考API：{src: string, poster?: string, objectFit?: string} Slots插槽属性 默认值 - 自定义内容，覆盖到视频上方的所有自定义内容 v-slot=“data” 为当前渲染数据，请参照使用示例 方法 // 播放第几个视频 mTikTokRef.value?.initSwiperData(index); // 播放与暂停 mTikTokRef.value?.togglePlay(); // 播放跳转到指定位置，单位 s mTikTokRef.value?.playSeeked(8); 根据提供的代码，这是一个使用Vue.js和mTikTok组件的示例。这段代码的主要功能是创建一个视频播放器，显示多个视频片段，并提供了加载更多和更改视频数据的功能。以下是对代码的解析：
  1. 在<template>标签内，定义了一个名为video-container的div，用于包裹整个视频播放器。
  2. <mTikTok ref="#/instance/{ref}"></mTikTok>部分使用了mTikTok组件，通过ref属性绑定到组件实例上。
  3. <mTikTokRef>部分是一个响应式对象，用于存储视频列表和相关数据。
  4. <view class="video-side-right">定义了一个视图，包含一些样式和内容。
  5. <template v-slot=“data”>部分定义了一个名为data的插槽，用于渲染特定的数据。
  6. <template v-slot=“data”>部分还定义了一个名为action-item的插槽，用于渲染动作按钮和其他元素。
  7. <view class="video-bottom-area">定义了一个名为video-bottom-area的视图，用于显示底部信息。
  8. <style lang=“scss” setup>部分定义了一些样式，用于设置页面的视觉效果。
  9. $zIndex: 99;定义了一个变量，用于设置元素的z-index值。
  10. .video-layer { position: absolute; right: 12px; bottom: 120px; color: #fff; }定义了一个名为video-layer的视图，用于显示视频层。
  11. .video-bottom-area { left: 20px; bottom: 40px; opacity: 0; transition: all 250ms; z-index: 0; } .shop-name { color: #fff; margin-bottom: 6px; } .shop-card { width: 160px; height: 80px; background-color: rgba(255, 255, 255, 0.5); border-radius: 4px; } }定义了名为video-bottom-area的视图，用于显示底部信息。
  12. .action-item { position: relative; margin-bottom: 20px; text-align: center; ... }定义了一个名为action-item的视图，用于显示动作按钮和其他元素。
  13. .action-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f60; font-size: 16px; } }定义了名为action-btn的动作按钮。
  14. .action-item-user { margin-bottom: 40px; } .action-item-text { display: block; font-size: 12px; } .action-item-text { display: none; } .active { transition: all 250ms; } .action-item-text { display: block; font-size: 12px; } .action-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f60; font-size: 16px; } }定义了名为action-item-user、action-item-text和action-item-text的动作按钮、文本和文字。
  15. <script lang=“ts” setup>部分使用了TypeScript语法，用于编写组件的逻辑。
  16. const loadMore = () =&gt; { console.log(&#34;加载更多&#34;); }; const change = (e: any) =&gt; { state.cutVideo = e.detail; console.log(&#34;🚀 ~ file: index.vue:53 ~ change ~ data:&#34;, e); };定义了函数loadMore和change，用于处理加载更多和更改视频数据的事件。
  17. onMounted(() =&gt; { mTikTokRef.value?.initSwiperData(index); });在组件挂载后初始化视频数据的swiper组件。
  18. onMounted(() =&gt; { mTikTokRef.value?.initSwiperData(index); });在组件挂载后初始化视频数据的swiper组件。 综上所述，该代码实现了一个简单的视频播放器，可以播放多个视频片段，并提供加载更多和更改视频数据的功能。