微信小程序组件仿某音

微信小程序仿抖音

效果如下


微信小程序仿照抖音app，本项目仅仅是小程序的一个片段，不具备抖音视频的全部功能，但是可以实现视频的上下滑动切换，可以到达刷视频的快感，请放心体验（注：此代码片段仅包含前端代码，数据直接使用的网址）

项目的实现

先创建一个代码片段再创建一个页面，也可以直接创建一个页面即可，如index

一、自定义样式

配置 index.json 文件，开启自定义顶部，并自定义样式。

{
  "usingComponents": {},
  "navigationStyle": "custom",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "white"
}

二、页面的实现

在 index.wxml 页面中指定一个最大的容器 container-video 来放置视频，并绑定事件 changePlayStatus 达到不论点击页面那个位置都能实现播放/暂停的效果。

video 组件说明

controls —> 是否显示默认播放控件（播放/暂停按钮、播放进度、时间）

object-fit属性 —> 当视频大小与 video 容器大小不一致时，视频的表现形式

loop属性 —> 是否循环播放

其他参见官方文档：微信开放文档

tools属性所在的标签主要是设置视频中的其他功能如用户头像、关注、点赞、评论、视频介绍等

需要源码的小伙伴看👀👇

项目源代码获取方式：

https://gitee.com/OHUHO/mini-program-components.git

https://github.com/OHUHO/mini-program-components.git