微信小程序仿哔哩哔哩视频组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序仿哔哩哔哩视频组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

效果如下图

一、项目介绍

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