微信小程序视频组件仿照哔哩哔哩
微信小程序仿照哔哩哔哩（包含源码获取）
效果如下图
一、项目介绍
项目为简单的小程序代码片段，不包含后端，只通过原生的小程序语言开发，使用官方原生的 video，没有使用任何的第三方的组件库，
需要的小伙伴可以自己获取项目的源代码，引入项目即可使用
视频组件video是在官方的 示例代码 的基础上改进的，其中在官方的基础上添加了如下功能：
双击播放/暂停
弹幕关闭/开启
注：由于小程序的 video 的 danmu-btn 属性的局限性，弹幕按钮，只在初始化时有效，不能动态变更，因此使用自定义的开启/关闭按钮仅仅在视频播放中一次有效（有知道解决办法的友友可以探讨一下）
二、项目结构
components（自定义组件）
Comment（评论组件）
Video-Recommend（视频推荐列表组件）
images（图片资源）
index（主页面）
三、项目说明
项目仅仅使用一个页面index实现，页面展示了video部分和video下面的区域（重点）
下面讲下如何实现自定义导航栏的滑动切换和点击切换
首先我们在 wxml 页面通过 scroll-view 标签和 swiper 标签的搭配使用实现页面可以左右切换
<view> <scroll-view class="scroll-x" scroll-x="true" scroll-with-animation> <block wx:for-items="{{tabs}}" wx:key="index"> <view id="{{index}}" class="item {{activeIndex == index ? 'active' : ''}}" bindtap="tabClick"> {{item}} </view> </block> </scroll-view> </view> <swiper class="swiper-box" style="height:calc(100vh - 76rpx);" bindchange="change" current="{{activeIndex}}"> <swiper-item> <scroll-view scroll-y="true" class="scroll-y"> <!-- 一区域 --> </scroll-view> </swiper-item> <swiper-item> <scroll-view scroll-y="true" class="scroll-y"> <!-- 二区域 --> </scroll-view> </swiper-item> </swiper>
在 wxss 中 写出样式和点击/滑动选中的样式 active
最后在 js 中写好滑动和点击切换的逻辑
data:{ tabs: ["简介", "评论"] activeIndex: 0, // 默认选中第一个 } tabClick: function (e) { var current = e.currentTarget.id; this.setData({ activeIndex: current, }); }, change: function (e) { this.setData({ activeIndex: e.detail.current, }) },
页面结构了解清晰了之后，就只需要引入自定义的视频推荐列表的组件和评论的组件，并且将数据从主页面传递给组件就大功告成了。
四、源码获取
github: https://github.com/OHUHO/mini-program-components
gitee: https://gitee.com/OHUHO/mini-program-components
组件目前还有很多不完善的地方，希望各位佬在使用中遇到问题能给我留言，看到了必将第一时间回复。
