微信小程序仿抖音
效果如下
微信小程序仿照抖音app，本项目仅仅是小程序的一个片段，不具备抖音视频的全部功能，但是可以实现视频的上下滑动切换，可以到达刷视频的快感，请放心体验（注：此代码片段仅包含前端代码，数据直接使用的网址）
项目的实现
一、自定义样式
配置 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