实现类似抖音直播并

最新推荐文章于 2023-11-22 22:27:59 发布

Zimbl

最新推荐文章于 2023-11-22 22:27:59 发布

阅读量366

点赞数

分类专栏：抖音效果拉流 video直播文章标签： uni-app

本文链接：https://blog.csdn.net/Zimbl/article/details/115306821

版权

本文介绍如何利用nvue的list组件和cell组件，创建全屏上下滑动的直播页面。通过新建nvue页面，设置触摸事件，创建video循环组件，并通过监控元素index来处理直播间切换，实现数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

利用nvue的list 实现类似抖音直播并且可以实现向上向下滑动均可加载数据

一、使用的nvue 组件

使用 nvue 的 list 组件 + cell组件实现

二、使用步骤

1.新建nvue 页面添加列表实现全屏的上下滑动功能

新建nvue 页面给最外层view 盒子添加 flex: 1; 这是能够全屏上下滑动的关键所在

<view class="container">
	<list class="liveListBox"  :scrollTop = "liveScrollTop" @scroll="listScroll" :loadmoreoffset="wHeight" :show-scrollbar="false" :bounce="true" ref="listBox" :pagingEnabled="true" :scrollable="LiveScrollable">
		<cell v-for="(item,index) in liveList" :key="index">
			<div ref="item" class="item" :style="boxStyle">
					<!-- <view>{
  {item.id}}</view> -->
					<!-- <video :src="item.url" :style="{width: '750rpx',height: windowHeight + 'px'}" :autoplay="false"
						></video> -->

					<jVideo v-if="Math.abs(nowKey - index)<=1" @changeIsLoad="changeIsLoad" :id=