回答

list可以实现，而且比较顺滑无卡顿，

新建一个nvue页面，pages.json设置style如下：

打开manifest.json，勾选videplayer模块

具体完整代码如下：

点击查看全文

<template>
	<view class="container">
		<!-- #ifdef APP -->


		<view @click="autoPlay" style="position: fixed; margin-top: 100upx; left: 40upx;">
			<text
				style="padding: 10upx; padding-left: 40upx; padding-right: 40upx; border-radius: 20upx; background-color: #F8F8F8; color: #007AFF; font-weight: bold; font-size: 14px;">{{autoplayText}}</text>
		</view>

		<image v-if="isShowAixin" src="@/static/img/index/aixining.png"
			:style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'">
		</image>
		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" v-if="isShow1">

			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*3" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true">
				<!-- 刷新模块 -->
				<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
					:display="refreshing ? 'show' : 'hide'">
					<loading style="background-color: #FFFFFF;">
						<image src="@/static/img/index/logins.gif"
							:style="'width: 80upx; height: 40upx; margin-top: 80upx; margin-bottom: 30upx; margin-left: '+ (windowWidth - 200) +'px;'">
						</image>
					</loading>
				</refresh>

				<!-- 循环数据 -->
				<cell v-for="(item,i) in dataList" :key="i">
					<!-- 用div把视频模组套起来 -->
					<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" :ref="'item'+i">
						<view v-if="(k-i)<=1">
							<view class="root">

								<video :id="item._id" :loop="true" :src="item.src" :muted="item.isplay"
									@play="playIngs(i)" :enable-progress-gesture="false" :page-gesture="false"
									:controls="false" :http-cache="true" :show-loading="false"
									:show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
									:object-fit="object_fit" @timeupdate="timeupdate($event,i)"></video>
								<!-- 这里是封面 -->
								<image v-if="!item.playIng" :src="item.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
									:mode="mode"
									:style="'width: '+ windowWidth +'px; height: '+ (wHeight - deleteHeight) +'px; position: absolute;'">
								</image>

							</view>
							<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
							<!-- 这个是暂停时出现的图标 -->
							<view class="videoHover" @click="tapVideoHover(item.state,$event)"
								@touchstart="touchstartHover" :style="boxStyle">
								<image v-if="item.state=='pause'" class="playState"
									src="//repo.bfw.wiki/bfwrepo/image/612248930fec0.png"></image>
							</view>
							<view class="userInfo">
								<!-- 1.头像 -->
								<image v-if="item.isShowProgressBarTime == false" @click="tozuozhe" class="userAvatar"
									:src="item.href" mode="aspectFill"></image>
								<!-- 2.点赞 -->
								<view v-if="item.isShowProgressBarTime == false" @click="cLike(item.like);"
									style="opacity: 0.9; margin-top: 17px;">
									<image v-if="item.like" src="//repo.bfw.wiki/bfwrepo/icon/5ff8f1528e5f1.png"
										style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
									<image v-if="!item.like" src="//repo.bfw.wiki/bfwrepo/icon/5d834be1e8f47.png"
										style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
									<text
										style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;"
										:class="{'likeNumActive':item.like}">{{item.like_n}}</text>
								</view>
								<!-- 3.评论 -->
								<view v-if="item.isShowProgressBarTime == false" class="comment"
									style="opacity: 0.9; margin-top: 17px;">
									<image src="//repo.bfw.wiki/bfwrepo/icon/6229e8c7dbc82.png"
										style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
									<text
										style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{item.sms_n}}</text>
								</view>
								<!-- 4.分享 -->
								<view v-if="item.isShowProgressBarTime == false" @click="share"
									style="opacity: 0.9; margin-top: 17px;">
									<image src="//repo.bfw.wiki/bfwrepo/image/5ff8ee1070a63.png"
										style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
									<text
										style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
								</view>
								<!-- 5.转轮 -->
								<block v-if="platform == 'ios'">
									<view v-if="item.isShowProgressBarTime == false" @click="dealVoice"
										style="margin-top: 17px;">
										<view
											style="width: 48px; height: 48px; border-radius: 50px; position: absolute; right: 2.5px;">
											<image
												:style="'width: 48px; height: 48px; border-radius: 50px; transform: rotate('+ rotates +'deg);'"
												src="@/static/img/index/bfq.png" mode="aspectFill"></image>
											<image v-if="showPlay"
												:style="'width: 30px; height: 30px; margin-top: 9px; margin-left: 9px; position: absolute; border-radius: 50px; transform: rotate('+ rotates +'deg);'"
												:src="item.href" mode="aspectFill"></image>
										</view>
									</view>
									<view v-if="platform == 'ios'" style="margin-top: 48px;"></view>
								</block>
								<block v-if="platform !== 'ios'">
									<view v-if="item.isShowProgressBarTime == false" @click="dealVoice"
										style="margin-top: 15px; width: 48px; height: 48px;">
										<text style="font-size: 0.1px; opacity: 0;">.</text>
										<view
											style="width: 48px; height: 48px; border-radius: 50px; position: absolute;">
											<image
												:style="'width: 48px; height: 48px; border-radius: 50px; transform: rotate('+ rotates +'deg);'"
												src="//repo.bfw.wiki/bfwrepo/icon/60d1c2f3e1d1e.png"
												mode="aspectFill"></image>
											<image v-if="showPlay"
												:style="'width: 30px; height: 30px; margin-top: 9px; margin-left: 9px; position: absolute; border-radius: 50px; transform: rotate('+ rotates +'deg);'"
												:src="item.href" mode="aspectFill"></image>
										</view>
									</view>
								</block>
							</view>
							<!-- 最底下的文字部分 -->
							<view class="content"
								v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false">
								<text class="userName"
									:style="'width: '+ (windowWidth - 90) +'px;'">{{item.title}}</text><!-- i={{i}} -->
								<text class="words"
									:style="'width: '+ (windowWidth - 90) +'px;'">{{item.msg}}-{{k+1}}</text><!-- k={{k}} -->
							</view>
							<!-- 1.视频预览时的图片，currenttimes：就是获取当前滑块的时间点，如果不需要，可以注释掉 -->
							<!-- 2.如果使用下面的视频预览的话要注意的是视频链接最好是阿里云上的，因为
									https://xxxxxxxxx.mp4?x-oss-process=video/snapshot,t_1000,f_jpg
									这个是阿里云的东西，至于其他的视频截帧我还没有试过。
									-->
							<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
							<image v-if="item.isShowimage == true"
								:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
								mode="aspectFill"
								:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'">
							</image>
						</view>
					</div>
				</cell>
			</list>
			<!-- 1.注意：进度条这类拖拽的东西不能放进block\cell这些循环体中的，要不然touchmove方法会捕捉有误 -->
			<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
				:style="'position: absolute; bottom: '+ (ProgressBarBottom + this.windowWidth*0.2)/2 +'px; left: '+ (windowWidth*2 - this.windowWidth*1.35)/2 +'px;'">
				<text style="font-size: 22px; font-weight: bold; color: #F1F1F1;">{{changeTime}} / {{videoTimes}}</text>
			</view>
			<!-- 这里就是进度条了：纯手工进度条，调整位置的话就把他们的 bottom 改成一下就行了 -->
			<view v-if="isDragging == false" @touchmove="touchmove" @touchend="touchend" @touchstart="touchstart"
				style="position: absolute; bottom: 0; left: 0;">
				<!-- 1.这一步必须加，为了适配低端机型 -->
				<text :style="'width: '+ windowWidth +'px; opacity: 0;'">.</text>
				<!-- 2.这是未加载的时的右边的灰色部分 -->
				<view
					:style="'width: '+ windowWidth +'px; height: 4upx; background-color: #C8C7CC; position: absolute; bottom: '+ ProgressBarBottom +'upx; opacity: '+ ProgressBarOpacity +';'">
				</view>
				<!-- 3.这里我采用的分离式办法：就是让滑动样式和不滑动的样式分开，这样相互不干扰，可以避免进度条闪动的问题 -->
				<!-- 4.注意：isShowProgressBarTime 加入了返回数据中 -->
				<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false"
					:style="'width: '+ (currentPosition) +'px; height: 4upx; background-color: #FFFFFF; position: absolute; bottom: '+ ProgressBarBottom +'upx; left: 0; opacity: '+ (ProgressBarOpacity - 0.1) +';'">
				</view>
				<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
					:style="'width: '+ (currentPositions) +'px; height: 8upx; background-color: #FFFFFF; position: absolute; bottom: '+ ProgressBarBottom +'upx; left: 0; opacity: '+ (ProgressBarOpacity + 0.05) +';'">
				</view>
				<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == false"
					:style="'width: 4px; height: 4px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 2) +'upx; left: '+ (currentPosition) +'px; opacity: '+ ProgressBarOpacity +';'">
				</view>
				<view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true"
					:style="'width: '+ dotWidth +'px; height: '+ dotWidth +'px; background-color: #FFFFFF; border-radius: 10px; position: absolute; bottom: '+ (ProgressBarBottom - 5) +'upx; left: '+ (currentPositions - 5) +'px; opacity: '+ ProgressBarOpacity +';'">
				</view>
			</view>
		</view>

		<!-- #endif -->
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//下面打