<!-- 普通模式演示(nvue) -->
<template>
<view class="content">
<list :style="{ height: height, background: '#000000' }" @loadmore="queryList(pageNum+1,5)"
:pagingEnabled="true">
<cell :style="videoStyle" class="item" v-for="(item,index) in dataList" :key="item.title"
@disappear="Disappear(item)" @click="itemClick(item)">
<video v-if="item.videoId" :poster="item.cover"
src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2908110e-6da2-4899-8b44-d45c153457ad/ec383f81-6896-4274-8861-e329ae1376b4.mp4"></video>
<image v-else :style="videoStyle" :src="item.cover"></image>
<view class="content_ment" @appear="Appear(item)">
{{index}}
</view>
</cell>
</list>
</view>
</template>
<script>
export default {
data() {
return {
// v-model绑定的这个变量不要在分页请求结束中自己赋值!!!
dataList: [],
height: 0,
sHeight: 0,
videoStyle: {
height: 0,
width: "750rpx",
},
// 当前播放视频id
videoPlayId: "",
// 下一个视频id
nextId: "",
// 退出页面的视频id
exitId: "",
// 当前id
currentId: "",
pageNum: 1,
}
},
watch: {
currentId(val) {
if (this.dataList.length > 3) {
if (val === this.dataList[this.dataList.length - 3].id) {
this.$nextTick(() => {
// this.$refs.paging && this.$refs.paging.doLoadMore();
this.queryList(this.pageNum+1, 5);
});
}
}
},
},
onLoad() {
this.height = uni.getSystemInfoSync().windowHeight;
this.sHeight = uni.getSystemInfoSync().statusBarHeight;
this.videoStyle.height = this.height;
this.queryList(this.pageNum, 5);
},
methods: {
getData(params) {
// 这里就是数据加载完以后再向后端发送数据的地方
return new Promise((resolve, reject) => {
uni.request({
url: '数据地址',
method: 'POST',
data: params,
success: (res) => {
// let List = res.data;
// var msg = res.data.data;
// let List = JSON.parse( JSON.stringify(this.dataList) );
// for (let i = 0; i < msg.length; i++) {
// List.push(msg[i])
// }
// this.dataList = List;
resolve(res.data.data);
},
fail() {
reject(undefined)
}
})
})
},
async queryList(pageNo, pageSize) {
this.pageNum = pageNo;
const params = {
pageNum: pageNo,
pageSize: pageSize,
}
console.log("=====params", params)
const res = await this.getData(params);
this.dataList = this.dataList.concat(res.list)
},
Appear(data) {
this.nextId = data.id;
},
Disappear(data) {
this.exitId = data.id;
if (this.exitId !== this.nextId) {
this.currentId = this.nextId;
this.videoPlayId = this.dataList.filter(
(item) => item.id === this.nextId,
)[0].id;
}
},
itemClick(item) {
console.log('点击了', item.title);
}
}
}
</script>
<style>
.item {
flex-direction: row;
position: relative;
align-items: center;
justify-content: space-between;
border: 1prx solid red;
position: relative;
}
.item-detail {
padding: 5rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
color: white;
background-color: #007AFF;
}
.item-line {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: #eeeeee;
}
.content_ment {
position: absolute;
right: 26rpx;
bottom: 632rpx;
width: 100rpx;
height: 100rpx;
background-color: #007AFF;
}
.home-video-player-container {
width: 750rpx;
}
</style>
- 发布:2024-05-28 12:00
- 更新:2024-06-11 15:55
- 阅读:225
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版
HBuilderX类型: 正式
HBuilderX版本号: 4.14
手机系统: Android
手机系统版本号: Android 13
手机厂商: 小米
手机机型: redmiK50至尊版
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
分页获取数据,最好是每页几条数据(数据类型中含有视频和图片)
在列表中根据类型渲染出数据即可
分页获取数据,最好是每页几条数据(数据类型中含有视频和图片)
在列表中根据类型渲染出数据即可
预期结果:
数据正常显示
数据正常显示
实际结果:
数据少渲染,导致页面卡中间
数据少渲染,导致页面卡中间
bug描述:
代码大概是这样,刷着刷着就少渲染一条数据,就会卡在页面中间