今天要给大家分享的是使用vue3.0来实现抖音直播界面上下滑动效果。

预览效果

直播列表Tab

列表页面使用了Tab标签页组件。开启swipeable和sticky属性。

<div class="pg__live-swipe">
    <van-tabs sticky swipeable offset-top="1rem" background="#36384a"
        color="#face15" title-inactive-color="#9d9ea5" title-active-color="#fff"
    >
        <van-tab v-for="(item,index) in liveLs" :key="index" :title="item.label">
            <div class="lv__wrapls">
                <template v-if="item.list.length > 0">
                    <div class="item" v-for="(item2,index2) in item.list" :key="index2" @click="goToLivePlay">
                        <img class="pic" :src="item2.poster" />
                        <div class="user flexbox">
                            <div class="flex1 flex-c"><img class="avatar" :src="item2.avatar" /> {{item2.author}}</div>
                            <span><i class="iconfont icon-xihuan fs-32"></i> {{item2.likeNum}}</span>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="nodata"><i class="iconfont icon-info fs-42"></i><p>暂无数据！</p></div>
                </template>
            </div>
        </van-tab>
    </van-tabs>
</div>

直播模块

滑动区使用swipe组件来实现上下滑动，包含顶部导航条+视频区+留言互动区+底部栏几个部分。

<!-- ///滑动切换区 -->
<van-swipe :initial-swipe="liveActiveIndex" vertical lazy-render :show-indicators="false" :loop="false" @change="handleSwipeVertical">
    <van-swipe-item v-for="(item, index) in liveLs.list" :key="index">
        <!-- ///顶部导航 -->
        <div class="swipe__lvNavbar">
            <navbar :back="false" bgcolor="transparent">
                // ...
            </navbar>
        </div>
        <div class="swipe__hotLevel">{{item.playNum}}人看过 ? {{item.shareNum}}热度 <i class="iconfont icon-arrR fs-24"></i></div>
        <!-- ///视频模块 -->
        <div class="swipe__video">
            <video class="vdplayer" :id="'vd-'+index" loop preload="auto"
                :src="item.src" :poster="item.poster"
                webkit-playsinline="true" 
                x5-video-player-type="h5-page"
                x5-video-player-fullscreen="true"
                playsinline
                @click="handleVideoClicked"
            >
            </video>
        </div>
        <div class="swipe__lvinfo flexbox flex-col">
            <!-- 送礼物提示 -->
            <div class="lv__wrap-giftTips flexbox flex-alignc">
                // ...
            </div>

            <!-- 滚动消息 -->
            <div class="lv__wrap-rollMsg">
                // ...
            </div>

            <!-- 底部tool -->
            <div class="lv__wrap-ftBar">
                <div class="lv__wrap-editor flexbox">
                    // ...
                </div>
            </div>
        </div>
    </van-swipe-item>
</van-swipe>

互动区是使用v3popup弹框组件来使用聊天功能，提供两种表情选择。

<!-- ……聊天编辑器模板 -->
<v3-popup v-model="isShowChatEditor" position="bottom" opacity=".2">
    <div class="vui__footTool nt__commentWrap">
        <div class="wrap_cmtEditor flexbox">
            <chat-editor class="flex1" ref="editorRef" v-model="editorText" />
            <div class="icon" @click="isShowEmojView=true"><i class="iconfont icon-face"></i></div>
            <div class="icon" @click="handleSubmit"><i class="iconfont icon-send"></i></div>
        </div>
        <!-- 表情模块 -->
        <div v-show="isShowEmojView" class="vui__choosePanel vui__hairline-top">
            <div class="vui__emotion">
                <div class="vui__emotion-wrap flexbox flex-col">
                    <div v-for="(item,index) in emojLs" :key="index" class="vui__emotion-cells flex1" :class="{'cur': item.selected}">
                        <div :class="item.type == 'emoj' ? 'face__sm_list' : 'face__lg_list'">
                            <div class="face_list">
                                <div v-for="(item2,index2) in item.nodes" :key="index2" class="item">
                                    <img v-if="item.type=='emoj'" :src="item2" class="emoj" @click="handleEmojClicked" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="vui__emotion-tabs flexbox flex-alignc">
                        <div class="flex1 flexbox">
                            <span v-for="(item,index) in emojLs" :key="index" class="item" :class="{'on': item.selected}" @click="handleEmojTab(index)"><img :src="item.pathLabel" /></span>
                        </div>
                        <span class="item del" @click="handleDelClicked"><i class="iconfont icon-del fs-50"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</v3-popup>

整体实现起来还是蛮简单的，主要是一些细节方面需要多注意。

ok，以上就是vue3实现直播界面模板的一些分享，希望大家能喜欢哈~~