ll效果图:
代码:
<template>
<view>
<view class="videoBox">
<block v-for="(item,index) in videoList" :key="index">
<view class="videoItem">
<view> 视频:{{index + 1}} </view>
<block v-if= "item._id == vid" > <!-- 只加载点击播放的视频 -->
<video id="videoId" :src="item.fileID" autoplay="true" > </video>
</block>
<block v-else>
<view class="videoPoster" :data-vid="item._id" @tap="playing">
<image class="posterImg" src="../../static/media.jpg" mode="aspectFill"></image> <!-- 封面图 -->
<image class="playBtn" src="../../static/Play.png" mode="aspectFill"></image> <!-- 播放按钮 -->
</view>
</block>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
data() {
return {
videoList: [], //视频数据
pageIndex: 1 , //第几页
hasMore:false , //是否有更多数据
vid:'' ,
}
},
onLoad() {
this.getData() //调用函数
},
// 上拉触底事件
onReachBottom:function( ) {
if (this.hasMore) {
this.getData() //调用函数
setTimeout(() => {
uni.stopPullDownRefresh();
}, 1000);
} else {
uni.showToast({
title: '没有更多数据了!',
icon:'none'
})
}
},
methods: {
//加载数据
getData() {
wx.cloud.callFunction({ //调用云函数
name:'selectVideo', //云函数名称
data:{ //以下是云函数需要传入的参数
filter:{}, //筛选条件
pageIndex: this.pageIndex, //第几页
pageSize: 10 //每次加载的记录数量
},
success: (res) => {
//this.videoData = this.videoData.concat(res.result.data) //concat返回追加后的副本,并不会修改原有数组,多次追加后会产生许多副本,浪费内存
this.videoList.push(...res.result.data) //云端返回的查询数据,追加到数组 // push改变原数组,节约内存
this.hasMore = res.result.hasMore //云端返回的是否有更多数据
if (this.hasMore) {
this.pageIndex = this.pageIndex + 1
}
},
fail:(e) => {
console.log(e)
}
})
},
playing(e) {
var vid = e.currentTarget.dataset.vid
//console.log(vid)
this.vid = vid
}
}
}
</script>
<style>
.videoItem{
margin-bottom: 20rpx;
padding: 30rpx;
}
video{
width: 100%;
height: 450rpx;
}
.videoPoster{
width: 100%;
height: 450rpx;
border-radius: 20rpx;
overflow: hidden;
background-color: #333333;
text-align: center;
position: relative;
}
.posterImg{
width: 100%;
height: 100%;
}
.playBtn{
width: 100rpx;
height: 100rpx;
position: absolute;
z-index: 1000;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
云函数selectVideo:
// 云函数入口文件
const cloud = require('./node_modules/wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
var filter = event.filter ? event.filter : {} ; //筛选条件,默认为空,格式 {key:'values'}
var pageIndex = event.pageIndex ? event.pageIndex : 1 ; //当前第几页,默认为第一页
var pageSize = event.pageSize ? event.pageSize : 6 ; //每页取多少条记录,默认为6条
const countResult = await db.collection('video_base').where(filter).count() //获取集合中的总记录数
const total = countResult.total //得到总记录数
const totalPage = Math.ceil(total / pageSize) //计算页数 // ceil 向上取整
// const skipNum = Math.round(Math.random() * totalPage) // 获取从 1 到 totalPage 的随机整数 详细:https://www.runoob.com/w3cnote/js-random.html
var hasMore ; //提示前端是否还有数据
if (pageIndex > totalPage || pageIndex == totalPage) { //如果没有数据了,就返回false
hasMore = false
} else {
hasMore = true
}
//查询数据并返回给前端
return await db.collection('video_base')
.where(filter)
.skip((pageIndex - 1) * pageSize)
.limit(pageSize)
.orderBy('createTime','desc')
.get()
.then( res => {
res.hasMore = hasMore ;
return res ; // 返回json给客户端
})
}