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

京茶吉鹿

已于 2023-01-01 16:55:03 修改

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：微信小程序

于 2022-11-14 10:43:03 首次发布

本文链接：https://blog.csdn.net/weixin_52372879/article/details/127843023

版权

微信小程序专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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

效果如下图

一、项目介绍

项目为简单的小程序代码片段，不包含后端，只通过原生的小程序语言开发，使用官方原生的 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,
    })
},