#2020征文-手机#鸿蒙js开发五:鸿蒙多媒体和tabs的整合视频播放 原创

1.鸿蒙video组件和tab-bar组件构建视图

2.tab-bar视图滚动

3.视图层代码

<div class="container">
    <div  class="topview">
           <video  class="videoview"  autoplay="true" src="{{path}}" poster="" controls="true">
           </video>
    </div>
    <tabs class="tabs"   vertical="false"  index="0">
       <tab-bar  class="tab-bar"  mode="scrollable">
           <block  for="{{videopath}}">
               <text class="{{$idx==currentIndex?'on':'off'}}" onclick="clickmenu({{$idx}})">第{{$idx+1}}集</text>
           </block>
       </tab-bar>
       <!-- <tab-content class="tab-content" scrollable="true">
            <block  for="{{videopath}}">
                <div class="oneview">第{{$idx+1}}集简介</div>
            </block>
        </tab-content>-->
    </tabs>

    <div  class="debugview">
       <text  class="tv">{{title}}</text>
    </div>
</div>

4.样式代码

.container {

    width: 100%;
    height: 1200px;
    background-color: powderblue;
    display: flex;
    flex-direction: column;
}
.topview
{
    width: 100%;
    height: 30%;
    
}
.videoview{
    width: 100%;
    height: 100%;
}
.tabs{
    width: 100%;
    height: 50%;
}
.tab-bar{
    width: 100%;
    height: 20%;
    border-bottom:5px  solid  red;
}
.boxmenu{
    width: 30%;
    height: 100%;
    border:1px  solid  green;
}
.debugview{
    width: 100%;
    height: 100px;
}
.tv{
    font-size: 60px;
}
.oneview{

   display: none;
}
.twoview{
    width: 100%;
    height: 200px;
    background-color: yellow;
}
.on{
    color: forestgreen;

}
.off{
    color: black;
}

5.js业务逻辑层代码

export default {
    data: {
         currentIndex:0,
        title: '',
        path:"http://lixin.free.idcfengye.com/video/a1.mp4",
        cpath:"http://lixin.free.idcfengye.com",
        videopath:["/video/a1.mp4",
                   "/video/a0.mp4",
                   "/video/a3.mp4",
                   "/video/a4.mp4",
                   "/video/a5.mp4",
                   "/video/a6.mp4",
                   "/video/a7.mp4",
                   "/video/a14.mp4"
        ]

    },
    clickmenu(index)
    {
        this.title="第"+index+"集";
        this.path=this.cpath+this.videopath[index];
        this.currentIndex=index;

    },

    changemenu(event)
    {
       this.title=this.videopath[event.index];

        this.path=this.cpath+this.videopath[event.index];


    }
}

在使用tabs组件中的onchange事件，tab-bar和tab-content必须都要创建，否则onchange不响应。

另外一个解决方案，就是在每一个菜单上直接onclick事件，通过获取$idx传到业务逻辑层，做业务逻辑判断。

菜单的点击变色，已经解决。但是有一个bug，没有解决，细心的读者能不能发现呢？谢谢回复。