316 lines
11 KiB
Vue
316 lines
11 KiB
Vue
<template>
|
|
<view class="container999" >
|
|
<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
|
|
<swiper
|
|
style="width: 100vw;height: 100vh;will-change: transform;"
|
|
vertical
|
|
@touchend="refreshEnd"
|
|
@touchstart="refreshStart"
|
|
:duration="swiperDur"
|
|
:circular="circular"
|
|
@change="swiperChange"
|
|
@animationfinish="anFinish"
|
|
:current="currentIndex"
|
|
>
|
|
<swiper-item @touchmove="refreshMove" v-if="swiperList.length > 0" :item-id="item.id" style="will-change: transform;" v-for="(item, index) in swiperLength" :key="index">
|
|
<!-- {{swiperList[index].id == -1 ? '占位骨架屏':swiperList[index].id}} -->
|
|
<zwyVideo v-if="swiperList[index].id != -1 && swiperList[index].id != -2 && swiperList[index] && (fastIndex <= 1 && fastIndex >= -1)" :videoInfo="swiperList[index]" :nowId="swiperList[currentIndex].id"></zwyVideo>
|
|
<view v-if="swiperList[index].id != -3 && (fastIndex > 1 || fastIndex < -1)">快速滑动骨架屏</view>
|
|
</swiper-item>
|
|
<swiper-item v-if="swiperList.length == 0">刷新骨架屏</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import refresh from '../../components/refresh.vue';
|
|
const util = require('../../utils/util.js');
|
|
import zwyVideo from '../../components/zwyVideo.vue';
|
|
import {
|
|
videoList
|
|
} from '@/api/sms';
|
|
export default {
|
|
components: { zwyVideo,refresh },
|
|
data() {
|
|
return {
|
|
fastIndex:0, //快速滑动保存变量
|
|
startY: 0,//触摸
|
|
circular: false, //列表循环
|
|
swiperDur: 300, //切换时间
|
|
swiperList: [], //展示的列表
|
|
currentIndex: 0, //当前swiper下标
|
|
lastIndex: 0, //上个swiper下标
|
|
list: [], //全部数组
|
|
listIndex: 0, //当前项数组位置
|
|
swiperLength: 3, //设置swiper长度
|
|
pageNum: 0, //设置当前页数
|
|
enterPageNum: 0, //设置进入页面时候的页数(需同步设置pageNum)
|
|
enterIndex: 0, //设置进入页面时候的位置
|
|
onePage: 10 //设置一页数量
|
|
};
|
|
},
|
|
onLoad() {
|
|
// 设置跳转进入参数
|
|
this.enterPageNum = 0; //跳转进入时候的页数
|
|
this.enterIndex = 0; //设置跳转进入index位置
|
|
this.pageNum = this.enterPageNum; //设置当前页数为第三页
|
|
|
|
if (this.enterPageNum == 0 && this.enterIndex == 0) {
|
|
this.getList('refresh');
|
|
} else {
|
|
let tempNum = this.enterPageNum * this.onePage;
|
|
let tempList = [];
|
|
for (let i = 0; i < tempNum; i++) {
|
|
tempList.push({
|
|
id: i
|
|
});
|
|
}
|
|
this.list = tempList; //初始化填充列表
|
|
|
|
this.getList('listInit');
|
|
}
|
|
},
|
|
methods: {
|
|
// 刷新touch监听
|
|
refreshStart(e) {
|
|
if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshStart(e);
|
|
},
|
|
refreshMove(e){
|
|
if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshMove(e);
|
|
},
|
|
refreshEnd(e) {
|
|
if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshEnd(e);
|
|
},
|
|
isRefresh(){
|
|
this.getList('refresh');
|
|
},
|
|
swiperChange(e) {
|
|
console.log('swiperChange',e)
|
|
if (e.target.source == 'touch') {
|
|
let nowIndex = e.detail.current;
|
|
if (nowIndex > this.currentIndex) {
|
|
if (nowIndex == this.swiperLength - 1 && this.currentIndex == 0) {
|
|
this.fastIndex--;
|
|
} else {
|
|
this.fastIndex++;
|
|
}
|
|
} else if (nowIndex < this.currentIndex) {
|
|
if (nowIndex == 0 && this.currentIndex == this.swiperLength - 1) {
|
|
this.fastIndex++;
|
|
} else {
|
|
this.fastIndex--;
|
|
}
|
|
}
|
|
this.currentIndex = nowIndex;
|
|
if ((this.swiperList[nowIndex].id == -1 || this.swiperList[nowIndex].id == -2) && (this.fastIndex <= 1 && this.fastIndex >= - 1)) {
|
|
setTimeout(() => {
|
|
this.currentIndex = this.lastIndex;
|
|
console.log(this.swiperList[nowIndex].id, '-1到顶了,-2到底了');
|
|
}, 20);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
anFinish(e) {
|
|
if(this.fastIndex > 1 || this.fastIndex < -1){
|
|
this.fastChange();
|
|
return;
|
|
}
|
|
if (this.listIndex == 0) this.circular = false;
|
|
else this.circular = true;
|
|
let nowIndex = e.detail.current;
|
|
console.log('anFinish',e)
|
|
console.log('nowIndex',nowIndex)
|
|
|
|
if (nowIndex > this.lastIndex) {
|
|
if (nowIndex == this.swiperLength - 1 && this.lastIndex == 0) {
|
|
this.topSub(nowIndex);
|
|
} else {
|
|
this.bottomAdd(nowIndex);
|
|
}
|
|
} else if (nowIndex < this.lastIndex) {
|
|
if (nowIndex == 0 && this.lastIndex == this.swiperLength - 1) {
|
|
this.bottomAdd(nowIndex);
|
|
} else {
|
|
this.topSub(nowIndex);
|
|
}
|
|
}
|
|
this.lastIndex = nowIndex;
|
|
console.log('fastIndex',this.fastIndex);
|
|
this.currentIndex = nowIndex; //index矫正
|
|
this.fastIndex = 0;
|
|
},
|
|
fastChange(){
|
|
console.log('fastChange',this.fastIndex)
|
|
this.listIndex = this.fastIndex + this.listIndex;
|
|
console.log('fastChange',this.listIndex)
|
|
this.swiperList = [];
|
|
if (this.listIndex + this.swiperLength > this.list.length){
|
|
console.log('快速下滑加载')
|
|
this.getList('fastBottom');
|
|
}else if((this.listIndex < this.enterPageNum * this.onePage) && this.enterPageNum > 0){
|
|
console.log('快速上滑加载且当前索引小于 跳转进入的页码 * 一页视频数')
|
|
this.getList('fastTop');
|
|
}else{
|
|
console.log('未超出边界')
|
|
this.resetSwiperList();
|
|
}
|
|
this.fastIndex = 0;
|
|
},
|
|
resetSwiperList(){
|
|
this.swiperDur = 0;
|
|
if(this.listIndex < 0) this.listIndex = 0;
|
|
let tempList = this.list.slice(this.listIndex, this.swiperLength + this.listIndex - 1);
|
|
if(this.listIndex == 0){
|
|
tempList.push({ id: -1 });
|
|
}else{
|
|
tempList.push(this.list[this.listIndex - 1]);
|
|
}
|
|
this.swiperList = tempList;
|
|
setTimeout(()=>{
|
|
this.currentIndex = 0;
|
|
this.lastIndex = 0;
|
|
},100)
|
|
setTimeout(()=>{
|
|
this.swiperDur = 300;
|
|
},300)
|
|
},
|
|
listInit(res) {
|
|
let tempList = res.slice(this.enterIndex, this.swiperLength + this.enterIndex - 1);
|
|
if (this.enterIndex - 1 >= 0 && res[this.enterIndex - 1]) tempList.push(res[this.enterIndex - 1]);
|
|
console.log('tempList', tempList);
|
|
this.listIndex = this.enterIndex + this.enterPageNum * this.onePage;
|
|
this.swiperList = tempList;
|
|
if (this.enterIndex + this.swiperLength > this.onePage) this.getListNoThrottle('bottom');
|
|
if (this.enterIndex - this.swiperLength < 0) this.getListNoThrottle('top');
|
|
},
|
|
async getListNoThrottle(temp){
|
|
//temp取值 refresh--刷新 top--上加载 bottom--下加载 listInit--页面跳转进入初始化
|
|
if (temp == 'refresh') {
|
|
this.pageNum = 0;
|
|
this.list = [];
|
|
this.listIndex = 0;
|
|
this.currentIndex = 0;
|
|
this.lastIndex = 0;
|
|
this.swiperDur = 0;
|
|
this.swiperList = [];
|
|
}
|
|
let tempPageNum = this.pageNum;
|
|
if (temp == 'top' || temp=='fastTop') tempPageNum = this.enterPageNum - 1;
|
|
if (tempPageNum < 0) return;
|
|
if (this.listIndex == 0) this.circular = false;
|
|
|
|
await this.$http.get(`${videoList}`,{pageNum: tempPageNum}).then(r => {
|
|
let res=r.rows;
|
|
|
|
if (temp == 'top' || temp == 'fastTop') this.enterPageNum--;
|
|
else this.pageNum++;
|
|
if (tempPageNum == 0 && temp == 'refresh') {
|
|
let tempList = res.slice(0, this.swiperLength - 1);
|
|
tempList.push({
|
|
id: -1
|
|
});
|
|
this.swiperList = tempList;
|
|
this.$refs.refresh.endAfter() //刷新结束调用
|
|
}
|
|
|
|
|
|
if (temp == 'top' || temp=='fastTop' ) {
|
|
// 上拉加载 替换数组
|
|
this.list.splice(this.enterPageNum * this.onePage, this.onePage, ...res);
|
|
} else {
|
|
// 普通加载
|
|
this.list = this.list.concat(res);
|
|
}
|
|
|
|
|
|
if(temp == 'fastBottom'){
|
|
if (this.listIndex + this.swiperLength > this.list.length){
|
|
console.log('快速下滑加载')
|
|
this.getListNoThrottle('fastBottom');
|
|
}else{
|
|
console.log('未超出边界')
|
|
this.resetSwiperList();
|
|
}
|
|
return;
|
|
}
|
|
if(temp == 'fastTop'){
|
|
if ((this.listIndex < this.enterPageNum * this.onePage) && this.enterPageNum > 0){
|
|
console.log('快速下滑加载')
|
|
this.getListNoThrottle('fastTop');
|
|
}else{
|
|
console.log('未超出边界')
|
|
this.resetSwiperList();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 首次进入 temp=listInit 且长度不足重新获取列表时异常--补充swiperList
|
|
if (this.swiperList.length < this.swiperLength) {
|
|
if (temp == 'bottom') {
|
|
this.swiperList.splice(this.swiperList.length - 1, 0, ...res.slice(0, this.swiperLength - this.swiperList.length));
|
|
}
|
|
if (temp == 'top') this.swiperList.push(res[this.onePage - 1]);
|
|
}
|
|
if (temp == 'listInit') this.listInit(res);
|
|
this.swiperDur = 300;
|
|
});
|
|
},
|
|
getList: util.throttle(function(temp) {
|
|
this.getListNoThrottle(temp);
|
|
}, 600),
|
|
|
|
|
|
getRes(pageNum) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
let videoUrlObj = {
|
|
0: 'http://video-haodanku-com.cdn.fudaiapp.com/10e7eae47e4838892a2a1d727b69a109.mp4?attname=16036798785476.mp4',
|
|
1: 'http://183.240.22.110/upic/2019/04/14/14/BMjAxOTA0MTQxNDI5MzBfMTI2MTE0NzEzNF8xMjE5ODAxOTU4N18yXzM=_b_B77567b6ac999fd8a7df8b614611caf60.mp4',
|
|
2: 'http://183.240.22.86/upic/2020/05/26/11/BMjAyMDA1MjYxMTI0MDlfNTQzMzU2MTQ2XzI5MjkyODc0MTI0XzFfMw==_b_B3c45621e8bb098f7a30267a7efa185b7.mp4',
|
|
3: 'http://video-haodanku-com.cdn.fudaiapp.com/e16c1aab9999a8c2d2e8d95c9e6d77f0.mp4?attname=16036798787274.mp4',
|
|
4: 'http://video-haodanku-com.cdn.fudaiapp.com/02f7dfa9e2bd1f8271c5f6b6a0f63896.mp4?attname=16036798782979.mp4',
|
|
5: 'http://video-haodanku-com.cdn.fudaiapp.com/9fbb0c961ddfed01a8ac47035dabc089.mp4?attname=16036798789137.mp4'
|
|
};
|
|
let tempList = [];
|
|
let maxI = pageNum < 60 ? 10 : 0;
|
|
for (let i = 0; i < maxI; i++) {
|
|
let tempHeight = Math.ceil(Math.random() * 300);
|
|
if (tempHeight < 150) tempHeight = 150;
|
|
let videoUrl = videoUrlObj[Math.floor(Math.random() * 6)];
|
|
tempList.push({
|
|
posterImg: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png',
|
|
videoUrl: videoUrl,
|
|
height: tempHeight,
|
|
imgUrl: '../../static/logo.png',
|
|
id: pageNum * this.onePage + i
|
|
});
|
|
}
|
|
|
|
|
|
setTimeout(() => {
|
|
resolve(tempList);
|
|
}, 600);
|
|
});
|
|
},
|
|
topSub(swiperIndex) {
|
|
console.log('上滑--');
|
|
this.listIndex = this.listIndex - 1 < 0 ? 0 : this.listIndex - 1;
|
|
let tempIndex = swiperIndex - 1 < 0 ? swiperIndex - 1 + this.swiperLength : swiperIndex - 1;
|
|
this.swiperList[tempIndex] = this.list[this.listIndex - 1] ? this.list[this.listIndex - 1] : { id: -1 };
|
|
if (this.listIndex <= (this.enterPageNum + 1) * this.onePage) this.getList('top');
|
|
},
|
|
bottomAdd(swiperIndex) {
|
|
console.log('下滑++');
|
|
this.listIndex = this.listIndex + 1 > this.list.length - 1 ? this.list.length - 1 : this.listIndex + 1;
|
|
|
|
let tempIndex = swiperIndex + 1 > this.swiperLength - 1 ? swiperIndex + 1 - this.swiperLength : swiperIndex + 1;
|
|
this.swiperList[tempIndex] = this.list[this.listIndex + 1] ? this.list[this.listIndex + 1] : { id: -2 };
|
|
if (this.list.length - this.onePage <= this.listIndex) this.getList('bottom');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|