<template>
<div class="content-view">
<div class="div" v-for="(item, index) in currentPageData" :key='index' >
<div>{{item.name}}</div>
</div>
<footer>
<button @click="prevPage()">上一页</button>
<span>第{{currentPage}}页/共{{totalPage}}页</span>
</footer>
</div>
</template>
export default {
data() {
return {
previewVideos: [
{streamUrl: 'rtmp://media3.sinovision.net:1935/live/livestream', name: 'video5', id: '1'},
{streamUrl: 'rtmp://ns8.indexforce.com/home/mystream', name: 'video3', id: '2'},
{streamUrl: 'rtmp://media3.sinovision.net:1935/live/livestream', name: 'video5', id: '3'},
{streamUrl: 'rtmp://ns8.indexforce.com/home/mystream', name: 'video3', id: '4'},
{streamUrl: 'rtmp://media3.scctv.net/live/scctv_800', name: 'video5', id: '5'},
{streamUrl: 'rtmp://media3.scctv.net/live/scctv_800', name: 'video3', id: '6'},
{streamUrl: 'rtmp://192.168.1.139/hls/mystream', name: 'video5', id: '7'},
{streamUrl: 'rtmp://192.168.1.139/hls/mystream', name: 'video3', id: '8'},
{streamUrl: 'rtmp://live.chosun.gscdn.com/live/tvchosun1.stream', name: 'video5', id: '9'},
{streamUrl: 'rtmp://live.chosun.gscdn.com/live/tvchosun1.stream', name: 'video3', id: '10'},
],
currentPageData: [] //当前页显示内容
totalPage: 1, // 统共页数,默认为1
currentPage: 1, //当前页数 ,默认为1
pageSize: 5, // 每页显示数量
}
},
mounted() {
// 计算一共有几页
this.totalPage = Math.ceil(this.previewVideos.length / this.pageSize);
// 计算得0时设置为1
this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
this.getCurrentPageData();
},
methods:{
getCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.currentPageData = this.previewVideos.slice(
begin,
end
);
},
//上一页
prevPage() {
console.log(this.currentPage);
if (this.currentPage == 1) {
return false;
} else {
this.currentPage--;
this.getCurrentPageData();
}
},
// 下一页
nextPage() {
if (this.currentPage == this.totalPage) {
return false;
} else {
this.currentPage++;
this.getCurrentPageData();
}
},
}
}
07-08
373
02-23
1129