sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改nvue滚动效果

master
于肖磊 2026-03-13 10:11:04 +08:00
parent db906a45f4
commit 5bd3f222f0
5 changed files with 91 additions and 2439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2047
pages/plugins/video/components/old-detail.vue
View File

File diff suppressed because it is too large Load Diff

20
pages/plugins/video/detail/detail-nvue.css
View File

@ -312,6 +312,26 @@
z-index: 9;
}
.cover-view-center{
position: fixed;
justify-content: center;
align-items: center;
z-index: 999;
}
.left-div{
position: absolute;
top: 0;
justify-content: center;
align-items: center;
}
.right-div{
position: absolute;
top: 0;
justify-content: center;
align-items: center;
}
.keyboard-input {
position: fixed;
left: 0;

315
pages/plugins/video/detail/detail.nvue
View File

@ -2,9 +2,9 @@
<view :class="theme_view" :style="width_height_style">
<view v-if="video_data_list && video_data_list.length > 0" class="content pr" :style="width_height_style">
<!-- 视频列表 -->
<view class="swiper" ref="swiper" :style="width_height_style">
<block v-for="(video_item, index) in video_data_list" :key="video_item.id">
<view class="pr" @tap.stop="toggle_play_pause" @touchstart.prevent="ListTouchStart" @touchmove.prevent="ListTouchMove">
<view class="swiper" ref="swiper">
<block v-for="(video_item, index) in video_data_list" :key="video_item.id">
<view class="pr" @tap.stop="toggle_play_pause" :style="width_height_style + swiperStyle" @touchstart.prevent="ListTouchStart" @touchmove.prevent="ListTouchMove">
<view class="video-bg" :style="(!isEmpty(video_item.cover) ? 'background-image: url(' + video_item.cover + ')' : '') + width_height_style"></view>
<video class="video" :style="width_height_style + swiperStyle" :src="video_item.video_url" :poster="video_item.cover" :id="`video_${index}`" :loop="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :show-play-btn="false" :controls="false" :show-mute-btn="true" object-fit="contain" @timeupdate="handle_time_update" @play="handle_play" @tap.stop="toggle_play_pause"></video>
@ -250,10 +250,13 @@
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
import componentPopup from '@/components/popup/popup';
import componentUpload from '@/components/upload/upload';
import componentUpload from '@/components/upload/upload';
import scrollMixins from './scrollMixins';
// 多语言
//#ifdef APP-NVUE
const BindingX = uni.requireNativePlugin('bindingx');
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
import i18n from '@/locale/index.js';
// nvue页面在方法中使用时的处理
import { initVueI18n } from '@dcloudio/uni-i18n';
@ -268,7 +271,7 @@
export default {
//#ifdef APP-NVUE
i18n,
//#endif
//#endif
mixins:[scrollMixins],
data() {
return {
@ -306,8 +309,6 @@
menu_button_info: '',
direction: 'direction',
base_config_data: {},
video_switch_debounce_timer: null, // 视频切换防抖定时器
video_cleanup_timer: null, // 视频清理定时器
comment_scroll_debounce_timer: null, // 评论滚动防抖定时器
comment_move_throttle_timer: null, // 评论拖拽节流定时器
// 添加下拉菜单状态管理
@ -331,11 +332,6 @@
windowHeight: 0,
padding_width: 0,
sub_comment_padding_left: 0,
// 视频滚动
swiper_start_y: 0,
swiper_current_y: 0,
swiper_move_distance: 0,
swiper_move_throttle_timer: null,
};
},
components: {
@ -427,13 +423,6 @@
},
onHide() {
// 清理定时器
if (this.video_switch_debounce_timer) {
clearTimeout(this.video_switch_debounce_timer);
}
if (this.video_cleanup_timer) {
clearTimeout(this.video_cleanup_timer);
}
// 清理所有视频资源
this.cleanup_all_videos();
},
@ -457,21 +446,12 @@
},
beforeDestroy() {
// 清理定时器
if (this.video_switch_debounce_timer) {
clearTimeout(this.video_switch_debounce_timer);
}
if (this.video_cleanup_timer) {
clearTimeout(this.video_cleanup_timer);
}
if (this.comment_scroll_debounce_timer) {
clearTimeout(this.comment_scroll_debounce_timer);
}
if (this.comment_move_throttle_timer) {
clearTimeout(this.comment_move_throttle_timer);
}
if (this.video_move_throttle_timer) {
clearTimeout(this.video_move_throttle_timer);
}
// 清理所有视频资源
this.cleanup_all_videos();
@ -516,13 +496,13 @@
this.menu_button_info = menu_button_info;
this.current_video_id = isEmpty(this.current_video_id) ? this.params.id : this.current_video_id;
this.get_video_detail(this.current_video_id);
//设置参数
this.typeX = false //开启左右滑动
this.playCount = 2 //剩余多少视频加载视频列表
this.startDistance = 5 //判断左右上下拖动的启动距离 px
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
this.get_video_detail(this.current_video_id);
//设置参数
this.typeX = false //开启左右滑动
this.playCount = 2 //剩余多少视频加载视频列表
this.startDistance = 5 //判断左右上下拖动的启动距离 px
this.minTime = 300 //判断快速滑动的时间,该时间内无视回弹距离判断
this.backDistance = 200 //判断上下滑动的回弹距离 px
} catch (error) {
console.error('init error:', error);
@ -602,29 +582,7 @@
existing_ids.set(item.id, true);
});
if (is_last == 1 && is_next == 1) {
// 上一批数据 - 去重处理
if (new_data.last && new_data.last.length > 0) {
const unique_last = new_data.last.filter(item => !existing_ids.has(item.id));
if (unique_last.length > 0) {
this.video_data_list.unshift(...unique_last);
// 更新 ID 映射表
unique_last.forEach(item => existing_ids.set(item.id, true));
}
}
// 下一批数据 - 去重处理
if (new_data.next && new_data.next.length > 0) {
const unique_next = new_data.next.filter(item => !existing_ids.has(item.id));
if (unique_next.length > 0) {
this.video_data_list.push(...unique_next);
}
}
} else if (is_last == 1 && new_data.last && new_data.last.length > 0) { // 上一页数据 - 去重处理
const unique_last = new_data.last.filter(item => !existing_ids.has(item.id));
if (unique_last.length > 0) {
this.video_data_list.unshift(...unique_last);
}
} else if (is_next == 1 && new_data.next && new_data.next.length > 0) { // 下一页数据 - 去重处理
if (is_next == 1 && new_data.next && new_data.next.length > 0) { // 下一页数据 - 去重处理
const unique_next = new_data.next.filter(item => !existing_ids.has(item.id));
if (unique_next.length > 0) {
this.video_data_list.push(...unique_next);
@ -652,7 +610,7 @@
// 逻辑说明：当是最后一个视频且需要播放下一个时，根据数组长度和新索引计算新的当前索引
// - 数组长度 > 2 时：新索引是最后一个元素则返回 2，是倒数第二个则返回 1，否则返回 0
// - 数组长度 <= 2 时：返回 length - 1
this.current_index = is_last == 1 && is_next == 1 ? new_index : this.current_index;
this.current_index = is_next == 1 ? new_index : this.current_index;
if (is_next == 1) {
setTimeout(() => {
@ -669,117 +627,6 @@
console.error('get_last_or_next_data_list error:', error);
}
},
// 视频拖拽开始
handle_swiper_touch_start(e) {
try {
// 如果是滚动区域内滚动到顶部才可以拖拽，如果是头部拖拽的话，一直都可以
this.swiper_start_y = e?.touches[0]?.pageY || 0;
this.swiper_current_y = this.swiper_start_y;
this.swiper_move_distance = 0;
} catch (error) {
console.error('handle_swiper_touch_start error:', error);
}
},
// 视频拖拽中
handle_swiper_touch_move(e) {
try {
// 阻止默认行为，防止页面滚动干扰
if (e.preventDefault) {
e.preventDefault();
}
const current_y = e?.touches[0]?.pageY || 0;
const distance = current_y - this.swiper_start_y;
// 只有向下移动且距离超过阈值（10px）才开始拖拽，避免误触和抖动
if (Math.abs(distance) > 10) {
this.swiper_current_y = current_y;
// 使用节流控制 move_distance 的更新频率，避免计算属性频繁触发导致抖动
if (this.swiper_move_throttle_timer) {
return;
}
this.move_distance = distance;
// 设置节流定时器，16ms 约等于 60fps，保证流畅度同时避免过度更新
this.swiper_move_throttle_timer = setTimeout(() => {
this.swiper_move_throttle_timer = null;
}, 80);
}
} catch(error) {
console.error('handle_swiper_touch_move error:', error);
}
},
// 视频拖拽结束
handle_swiper_touch_end(e) {
try {
const move_distance = this.swiper_current_y - this.swiper_start_y;
// 判断滑动方向：向下为正，向上为负
if (Math.abs(move_distance) > (this.windowHeight * 0.25)) {
// 只有滑动距离超过屏幕高度的 15% 才触发切换
if (move_distance > 0) {
// 向下滑动，切换到上一个视频
this.handle_swiper_change_by_direction('prev');
} else {
// 向上滑动，切换到下一个视频
this.handle_swiper_change_by_direction('next');
}
} else {
// 滑动距离不够，重置位置
this.swiper_move_distance = 0;
}
// 清理节流定时器
if (this.swiper_move_throttle_timer) {
clearTimeout(this.swiper_move_throttle_timer);
this.swiper_move_throttle_timer = null;
}
// 重置拖拽状态
this.swiper_start_y = 0;
this.swiper_current_y = 0;
} catch (error) {
console.error('handle_swiper_touch_end error:', error);
}
},
// 根据滑动方向切换视频
handle_swiper_change_by_direction(direction) {
try {
let new_index = this.current_index;
if (direction === 'prev') {
// 向下滑动，切换到上一个
if (this.current_video_index <= 0) {
app.globalData.showToast('已经是第一个视频了');
return;
}
} else if (direction === 'next') {
// 向上滑动，切换到下一个
if (this.current_video_index >= this.video_data_list.length - 1) {
app.globalData.showToast('已经是最后一个视频了');
return;
}
}
} catch (error) {
console.error('handle_swiper_change_by_direction error:', error);
}
},
// 视频滚动处理逻辑（带防抖）
handle_swiper_change(event) {
try {
const { current } = event.detail;
// 防抖处理，避免快速切换时的重复操作
if (this.video_switch_debounce_timer) {
clearTimeout(this.video_switch_debounce_timer);
}
this.video_switch_debounce_timer = setTimeout(() => {
this.process_swiper_change(current);
}, 100); // 100ms 防抖延迟
} catch (error) {
console.error('handle_swiper_change error:', error);
}
},
// 实际的 swiper 切换处理逻辑
process_swiper_change(current) {
@ -787,9 +634,10 @@
// 先暂停所有视频，确保不会有后台播放
this.pause_all_videos_except(current);
const id = this?.display_video_list[current]?.id || '';
const id = this?.video_data_list[current]?.id || '';
// 更新状态
this.paused = false;
this.current_index = current;
this.is_manual_pause = false;
this.current_video_progress = 0;
this.current_video_duration = 1;
@ -804,64 +652,20 @@
const pathname = location.href?.split('?')[0] || '';
history.replaceState(null, '', pathname + url.search);
//#endif
const index = this.video_data_list.findIndex(item => item.id == id);
// 数据预加载逻辑
// if (index < 2 && this.direction == 'prev') {
// this.get_last_or_next_data_list(this.video_data_list[0].id, 1, 0);
// } else
if (index < this.video_data_list.length - 3 && this.direction == 'next') {
this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
}
// 获取视频详细信息
this.get_video_data_detail(id);
// // 边界处理逻辑
// if (this.current_video_index == 0 && this.is_slide_start) {
// const list = this.update_video_list([0, 1, 2]);
// this.is_slide_start = false;
// this.current_index = 0;
// // this.swiper_key = get_math();
// // 刷新数据
// this.update_display_video_list(list);
// } else if (this.current_video_index == this.video_data_list.length - 1) {
// const list = this.update_video_list([-2, -1, 0]);
// this.current_index = list.length - 1;
// // this.swiper_key = get_math();
// // 刷新数据
// this.update_display_video_list(list);
// } else {
// this.is_slide_start = true;
// // this.swiper_key = get_math();
// this.update_display_data();
// }
// 更新分享信息
this.update_share_info(this.display_video_list[this.current_video_index]);
// this.swiper_key = get_math();
// this.$forceUpdate();
// 延迟播放当前视频，确保DOM更新完成
this.update_share_info(this.video_data_list[this.current_video_index]);
setTimeout(() => {
this.play_current_video_safely(this.current_index);
}, 150);
}, 50);
} catch (error) {
console.error('process_swiper_change error:', error);
}
},
update_video_list(offsets) {
try {
let list = [];
for (let i = 0; i < offsets.length; i++) {
const targetIndex = this.current_video_index + offsets[i];
if (targetIndex >= 0 && targetIndex < this.video_data_list.length) {
list.push(this.get_video_by_index(targetIndex));
}
}
return list;
} catch (error) {
console.error('update_video_list error:', error);
}
showToast(msg) {
app.globalData.showToast(msg);
},
// 批量暂停除指定索引外的所有视频
pause_all_videos_except(exceptIndex) {
try {
@ -1004,58 +808,6 @@
console.error('video_play_event error:', error);
}
},
// 安全获取视频数据的方法，处理索引超限情况
get_video_by_index(index) {
try {
// 处理负数索引
if (index < 0) {
// 循环到数组末尾
const actualIndex = this.video_data_list.length + (index % this.video_data_list.length);
return this.video_data_list[actualIndex] || {};
}
// 处理超出数组长度的索引
if (index >= this.video_data_list.length) {
// 循环到数组开头
const actualIndex = index % this.video_data_list.length;
return this.video_data_list[actualIndex] || {};
}
// 正常情况直接返回
return this.video_data_list[index];
} catch (error) {
console.error('get_video_by_index error:', error);
}
},
/*
* 更新显示的视频数据
*/
update_display_data() {
try {
let list = [];
// 如果当前索引为0，只显示当前元素和下一个元素
if (this.current_index == 0) {
if (this.current_video_index == 0) {
list = this.update_video_list([0, 1, 2]);
} else {
list = this.update_video_list([0, 1, -1]);
}
} else if (this.current_index == 1) { // 索引为1时，为确保无限轮播正常，需要改变数据插入顺序
list = this.update_video_list([-1, 0, 1]);
} else {
if (this.current_video_index == this.video_data_list.length - 1) {
list = this.update_video_list([-2, -1, 0]);
} else {
list = this.update_video_list([1, -1, 0]);
}
}
// 刷新数据
this.update_display_video_list(list);
} catch (error) {
console.error('update_display_data error:', error);
}
},
// 评论输入框事件
comment_input_event(e) {
@ -1108,25 +860,6 @@
}
},
// swiper-item 的位置发生改变时
on_transition(e) {
try {
const dy = e.detail.dy;
let status = 'direction';
if (dy > 0) {
status = 'next';
} else if (dy < 0) {
status = 'prev';
}
// 如果历史的是向下滑动，这次也是向下滑动，就不更新数据
if (this.direction != status) {
this.direction = status;
}
} catch (error) {
console.error('on_transition error:', error);
}
},
// 播放
handle_play() {
try {
@ -2038,7 +1771,7 @@
} catch (error) {
console.error('unbind_keyboard_listener error:', error);
}
},
}
}
};
</script>

4
pages/plugins/video/detail/detail.vue
View File

@ -1342,7 +1342,7 @@
const comment = this.active_comments[j];
if (comment.id == comments_id) {
updateThumbsStatus(comment, new_data);
return; // 找到后直接返回
console.log(comment);
} else {
// 安全检查sub_comments数组是否存在
if (comment.sub_comments && Array.isArray(comment.sub_comments)) {
@ -1351,7 +1351,6 @@
if (sub_comment.id == comments_id) {
updateThumbsStatus(sub_comment, new_data);
return; // 找到后直接返回
}
}
}
@ -1364,6 +1363,7 @@
break; // 处理完当前item后跳出外层循环
}
}
console.log(this.video_data_list[0]);
this.setData({
video_data_list: this.video_data_list
})

144
pages/plugins/video/detail/scrollMixins.js
View File

@ -9,17 +9,16 @@ export default {
startDistance:5, //开启左右滑动时有效,判断左右上下拖动的启动距离
minTime:300, //判断为快速滑动的时间,该时间内无视回弹
backDistance:200, //上下滑动的回弹距离
oldTime:0,
oldTouces:{},
touchType:null,
gesToken:0,
height:'667px',
index:0,
oldIndex:0,
width:'',
sysheight:0,
windowWidth: 0,
windowHeight:0,
distance:0,
distanceX:0,
scroll:false,
@ -29,10 +28,10 @@ export default {
//#ifdef APP-PLUS
plus.screen.lockOrientation("portrait-primary")
//#endif
this.sysheight = uni.getSystemInfoSync().windowHeight
this.height = `${this.sysheight}px`
let width = uni.getSystemInfoSync().windowWidth
this.width = `${width}px`
const data = uni.getWindowInfo();
this.windowWidth = data.windowWidth > 800 ? 800 : data.windowWidth;
this.windowHeight = data.windowHeight;
this.width = `${this.windowWidth}px`
},
methods:{
getEl: function(el) {
@ -45,13 +44,9 @@ export default {
},
// ListTouch触摸开始
ListTouchStart(e) {
this.oldTime = new Date()
this.oldTouces = e.changedTouches[0]
},
ListTouchEnd(e) {
console.log('end')
},
//判定方向
ListTouchMove(e){
//结束启动判断
@ -60,7 +55,7 @@ export default {
let newTouces = e.changedTouches[0]
if(!this.touchType){
let startDistance = this.typeX? this.startDistance: 0
let startDistance = this.typeX?this.startDistance: 0
//滑动启动条件
this.touchType = Math.abs( newTouces.pageY - oldTouces.pageY ) > startDistance ? 'moveY' : null
@ -74,9 +69,8 @@ export default {
this.touchType = newTouces.pageX - oldTouces.pageX > startDistance ? 'moveXR' : this.touchType
this.touchType = newTouces.pageX - oldTouces.pageX < -startDistance ? 'moveXL' : this.touchType
}
console.log(this.typeX);
}else{
console.log(this.touchType);
}else{
// 如果在执行动画，就不触发
if(this.scroll) return
// 解绑动画
@ -97,38 +91,24 @@ export default {
}else if(this.touchType == 'moveXR'){
move = 1
}
//关闭启动判断
this.touchType = 'stop'
let touch_origin = `y+${this.distance}<=0 && ${move}==0 && ${this.distanceX}==0 &&
y+${this.distance}-${this.sysheight}>=${-this.sysheight*this.video_data_list.length}?
y+${this.distance} : ${this.distance}`
y+${this.distance}-${this.windowHeight}>=${-this.windowHeight*this.video_data_list.length}?
y+${this.distance} : ${this.distance}`;
// 找到元素
let swiperRef = this.getEl(this.$refs.swiper)
console.log(swiperRef);
// let leftRef = this.getEl(this.$refs.left)
// let rightRef = this.getEl(this.$refs.right)
let anchor
// if(this.distanceX==0){
// let touchRef = this.getEl(this.$refs.touch)
// anchor = touchRef
// }
let swiperRef = this.getEl(this.$refs.swiper);
let gesTokenObj = BindingX.bind({
anchor:swiperRef,
eventType:'pan',
props: [
{element:swiperRef, property:'transform.translateY',expression: touch_origin},
{element:swiperRef, property:'transform.translateX',expression: `${move}!=0 && ${move}*x>0 ?x+${this.distanceX} : ${this.distanceX}`},
// {element:leftRef, property:'transform.translateX',expression: `${move}!=0&& ${move*this.distanceX}<=0&&x+${this.distanceX}<393?x+${this.distanceX} : ${this.distanceX}`},
// {element:rightRef, property:'transform.translateX',expression: `${move}!=0&& ${move*this.distanceX}<=0&&x+${this.distanceX}>-393?x+${this.distanceX} : ${this.distanceX}`}
{element:swiperRef, property:'transform.translateX',expression: `${move}!=0 && ${move}*x>0 ?x+${this.distanceX} : ${this.distanceX}`}
]
}, (e) => {
console.log(e, '2558');
}, (e) => {
if(e.state === 'end') {
this.touchType = null
@ -140,7 +120,15 @@ export default {
// 记录当前坐标
const distance = this.distance + e.deltaY
if(distance>0 || this.distance + e.deltaY-this.sysheight<-this.sysheight*this.video_data_list.length) return
if(distance>0 || this.distance + e.deltaY-this.windowHeight<-this.windowHeight*this.video_data_list.length) {
if (this.index == 0) {
this.showToast('当前已经是第一条了');
return;
} else if (this.index == this.video_data_list.length - 1) {
this.showToast('当前已经是最后一条');
return
}
}
this.bindTiming(distance,e.deltaY,quickMove)
}
@ -162,7 +150,7 @@ export default {
// 开始执行动画
this.scroll = true
let swiperRef = this.getEl(this.$refs.swiper)
let sysheight = this.sysheight
let windowHeight = this.windowHeight
let changed_Y, final_Y, translate_Y_origin
@ -174,37 +162,29 @@ export default {
translate_Y_origin = `easeOutExpo(t,${distance},${changed_Y},300)` // 运动曲线为easeOutElastic
} else{
// 往上下拖动超过一半时
final_Y = this.distance + (Y>0?1:-1) *this.sysheight
final_Y = this.distance + (Y>0?1:-1) *this.windowHeight
changed_Y= final_Y - distance// 计算出需要位置的值
translate_Y_origin = `easeOutExpo(t,${distance},${changed_Y},900)` // 运动曲线为easeOutExpo
}
console.log(translate_Y_origin);
translate_Y_origin = `easeOutExpo(t,${distance},${changed_Y},600)` // 运动曲线为easeOutExpo
}
let result = BindingX.bind({
eventType:'timing', // 结束的时候是没有任何监听的 用 timing 来做定时的动画
exitExpression:"t>600", // 当时间超过 300ms 结束动画
exitExpression:"t>300", // 当时间超过 300ms 结束动画
props: [
{element:swiperRef, property:'transform.translateY',expression:translate_Y_origin},
]
},async (e) => {
console.log(e);
},async (e) => {
if(e.state === 'end' || e.state === 'exit') {
this.distance = final_Y
this.scroll = false
console.log(this.video_data_list);
if( Math.abs(Y)>this.backDistance||quickMove) {
for (let item of this.video_data_list) {
item.flag = false
}
this.index = -this.distance/this.sysheight
this.video_data_list[this.index].flag = true
this.scroll = false
if(Math.abs(Y)>this.backDistance||quickMove) {
this.index = -this.distance/this.windowHeight;
this.process_swiper_change(this.index);
//加载视频
if(this.video_data_list.length - this.index - 1 <= this.playCount){
await this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
}
}else if(Math.abs(Y)<=this.backDistance&&!quickMove){
this.video_data_list[this.index].flag = true
this.play_current_video_safely(this.index);
}
}
})
@ -213,8 +193,6 @@ export default {
// 开始执行动画
this.scroll = true
let swiperRef = this.getEl(this.$refs.swiper)
// let leftRef = this.getEl(this.$refs.left)
// let rightRef = this.getEl(this.$refs.right)
let width = parseInt(this.width)
let changed_X, final_X, origin
@ -235,8 +213,6 @@ export default {
props: [
{element:swiperRef, property:'transform.translateX',expression:origin},
{element:swiperRef, property:'transform.translateY',expression:`easeOutExpo(t,${this.distance},0,200)`},
// {element:leftRef, property:'transform.translateX',expression:origin},
// {element:rightRef, property:'transform.translateX',expression:origin}
]
},async (e) => {
if(e.state === 'end' || e.state === 'exit') {
@ -245,11 +221,9 @@ export default {
if( Math.abs(X)<=10&&this.distanceX==0){
}else if( Math.abs(X)>10&&this.distanceX!=0) {
for (let item of this.video_data_list) {
item.flag = false
}
this.pause_all_videos_except(-1);
}else if(Math.abs(X)>10&&this.distanceX==0){
this.videoPlay(this.index)
this.play_current_video_safely(this.index);
}
}
@ -261,7 +235,7 @@ export default {
let swiperRef = this.getEl(this.$refs.swiper)
let changed_Y, final_Y, origin
final_Y = this.distance + (this.index-current) *this.sysheight
final_Y = this.distance + (this.index-current) *this.windowHeight
changed_Y= final_Y - this.distance // 计算出需要位置的值
time = time * Math.abs(this.index-current)
origin = `easeOutExpo(t,${this.distance},${changed_Y},${time})` // 运动曲线为easeOutExpo
@ -274,48 +248,20 @@ export default {
props: [
{element:swiperRef, property:'transform.translateY',expression:origin},
]
},async (e) => {
}, (e) => {
if(e.state === 'end' || e.state === 'exit') {
this.distance = final_Y
this.scroll = false
for (let item of this.video_data_list) {
item.flag = false
}
this.index = -this.distance/this.sysheight
this.video_data_list[this.index].flag = true
this.index = -this.distance/this.windowHeight
this.process_swiper_change(this.index);
//加载视频
if(this.video_data_list.length - this.index - 1 <= this.playCount){
await this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
this.get_last_or_next_data_list(this.video_data_list[this.video_data_list.length - 1].id, 0, 1);
}
}
})
},
pauseVideo(val){
this.video_data_list[this.oldIndex].initialTime = val
},
clickVideo(){
this.video_data_list[this.index].flag = !this.video_data_list[this.index].flag
},
videoPlay(index){
if(this.distanceX!=0) return
let promise = new Promise((resolve,reject)=>{
resolve()
})
promise.then(res=>{
this.video_data_list[index].flag = !this.video_data_list[index].flag
})
},
},
watch:{
index(newVal,oldVal){
this.oldIndex = oldVal
}
}
}