微信小程序仿哔哩哔哩视频组件

微信小程序视频组件仿照哔哩哔哩

微信小程序仿照哔哩哔哩（包含源码获取）

效果如下图

一、项目介绍

项目为简单的小程序代码片段，不包含后端，只通过原生的小程序语言开发，使用官方原生的 video，没有使用任何的第三方的组件库，

需要的小伙伴可以自己获取项目的源代码，引入项目即可使用

视频组件video是在官方的 示例代码 的基础上改进的，其中在官方的基础上添加了如下功能：

1. 双击播放/暂停
2. 弹幕关闭/开启

注：由于小程序的 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在 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,
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面结构了解清晰了之后，就只需要引入自定义的视频推荐列表的组件和评论的组件，并且将数据从主页面传递给组件就大功告成了。

四、源码获取

1. github: https://github.com/OHUHO/mini-program-components
2. gitee: https://gitee.com/OHUHO/mini-program-components

组件目前还有很多不完善的地方，希望各位佬在使用中遇到问题能给我留言，看到了必将第一时间回复。

组件还在不断更新中……，有任何问题和需求都可以通过下面的公众号**【京茶吉鹿】**联系我