修复ios视频兼容性问题,改为同h5播放形式
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}">
|
<view class="item" @appear="appear" @disappear="disappear" @click.stop :style="{height:height+'px'}" :key="index">
|
||||||
|
|
||||||
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
|
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
|
||||||
play-btn-position="center"
|
play-btn-position="center"
|
||||||
@@ -78,6 +78,10 @@
|
|||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
isAndriod:{
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
height:{
|
height:{
|
||||||
type:Number,
|
type:Number,
|
||||||
default:0
|
default:0
|
||||||
@@ -296,19 +300,18 @@
|
|||||||
|
|
||||||
let video = null
|
let video = null
|
||||||
|
|
||||||
function disappear() {
|
function disappear(e) {
|
||||||
emits('disappear')
|
emits('disappear',e)
|
||||||
if (video) {
|
if (video) {
|
||||||
video.pause()
|
video.pause()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const showVideo = computed(() => {
|
const showVideo = computed(() => {
|
||||||
// #ifdef H5
|
if(props.isAndriod){
|
||||||
return props.current === props.index && props.item.videoUrl
|
return props.nowIndex === props.index && props.item.videoUrl ?true :false
|
||||||
// #endif
|
}else{
|
||||||
// #ifdef APP
|
return props.current === props.index && props.item.videoUrl
|
||||||
return props.nowIndex === props.index && props.item.videoUrl ?true :false
|
}
|
||||||
// #endif
|
|
||||||
})
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
init()
|
init()
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- #ifdef H5 -->
|
<view v-if="isH5||isIos" class=" w-full box" style="width: 100vw;">
|
||||||
<view class=" w-full box" style="width: 100vw;">
|
|
||||||
<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
|
<swiper @longpress="popupShow('speed')" :style="{height:wHeight+'px'}" v-if="videoList.length"
|
||||||
@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
|
@change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
|
||||||
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
|
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
|
||||||
<swiper-item v-for="(item,index) in videoList" :key="index">
|
<swiper-item v-for="(item,index) in videoList" :key="index">
|
||||||
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
|
<list-item-vue :total="list.length" :item="item" :isCommand="isCommand" :height="wHeight"
|
||||||
|
:isAndriod="isAndriod"
|
||||||
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :showControls="control.showControls"
|
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :showControls="control.showControls"
|
||||||
:current="current" :isCollect="isCollect" @toDetail="toDetail(item,index)"
|
:current="current" :isCollect="isCollect" @toDetail="toDetail(item,index)"
|
||||||
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
|
@controlstoggles="controlstoggles" :playSpeeds="playSpeeds" :index="index" :nowIndex="nowIndex"
|
||||||
@@ -14,26 +14,25 @@
|
|||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
|
||||||
|
|
||||||
<!-- #ifdef APP -->
|
|
||||||
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
|
<list v-if="showAndriod" :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
|
||||||
@loadmore="loadmore" :scrollable="true">
|
@loadmore="loadmore" :scrollable="true">
|
||||||
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
|
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
|
||||||
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
|
<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
|
||||||
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
|
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
|
||||||
|
:isAndriod="isAndriod"
|
||||||
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :isCommand="isCommand"
|
:isTabbar="isTabbar" @playStatusChange="playStatusChange" :height="wHeight" :isCommand="isCommand"
|
||||||
:showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted"
|
:showControls="control.showControls" @toDetail="toDetail(item,index)" @itemMounted="itemMounted"
|
||||||
@controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex"
|
@controlstoggles="controlstoggles" :index="index" :instance="instance" :nowIndex="nowIndex"
|
||||||
@appear="appear($event,item,index)" :playSpeeds="playSpeeds" @disappear="disappear(item,index)"
|
@appear="appear($event,item,index)" :playSpeeds="playSpeeds"
|
||||||
@dianzanClick="dianzanClick(item,index)" @share="share(item)" @zhuijuClick="zhuijuClick(item)"
|
@disappear="disappear($event, item,index)" @dianzanClick="dianzanClick(item,index)"
|
||||||
|
@share="share(item)" @zhuijuClick="zhuijuClick(item)"
|
||||||
@popupShow="popupShow($event,item,index)"></list-item-vue>
|
@popupShow="popupShow($event,item,index)"></list-item-vue>
|
||||||
</view>
|
</view>
|
||||||
</cell>
|
</cell>
|
||||||
</list>
|
</list>
|
||||||
|
|
||||||
<!-- #endif -->
|
|
||||||
|
|
||||||
<!-- 返回按钮 -->
|
<!-- 返回按钮 -->
|
||||||
<view class="back-icon" v-if="!isTabbar&&control.showBack">
|
<view class="back-icon" v-if="!isTabbar&&control.showBack">
|
||||||
<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
|
<u-icon name="arrow-left" color="#fff" :size="28" @click="back"></u-icon>
|
||||||
@@ -264,6 +263,16 @@
|
|||||||
onUnmounted
|
onUnmounted
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
|
|
||||||
|
let isH5=true
|
||||||
|
// #ifdef H5
|
||||||
|
isH5=false
|
||||||
|
// #endif
|
||||||
|
const sysinfo=uni.getSystemInfoSync()
|
||||||
|
const isIos=sysinfo.platform=='ios'?true:false
|
||||||
|
const isAndriod=sysinfo.platform=='android'?true:false
|
||||||
|
|
||||||
|
const showAndriod=!isH5&&isAndriod
|
||||||
|
|
||||||
let initing = true
|
let initing = true
|
||||||
const refPoster = ref(null)
|
const refPoster = ref(null)
|
||||||
|
|
||||||
@@ -404,18 +413,17 @@
|
|||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
async function xuanjiInit() {
|
async function xuanjiInit() {
|
||||||
// #ifdef APP
|
|
||||||
const height = 44
|
const height = 44
|
||||||
const marginBottom = 10
|
const marginBottom = 10
|
||||||
const oneItemHeight = height + marginBottom
|
const oneItemHeight = height + marginBottom
|
||||||
const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
|
const scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
|
||||||
oneItemHeight / 2
|
oneItemHeight / 2
|
||||||
if(props.list.length<=15){
|
if (props.list.length <= 15) {
|
||||||
xuanjiData.scrollTop=0
|
xuanjiData.scrollTop = 0
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
xuanjiData.scrollTop = scrollTop * 1 <0 ? 0 : scrollTop
|
xuanjiData.scrollTop = scrollTop * 1 < 0 ? 0 : scrollTop
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
if (!xuanjiData.items[props.list.length - 1]) {
|
if (!xuanjiData.items[props.list.length - 1]) {
|
||||||
@@ -456,17 +464,42 @@
|
|||||||
if (isFirst) {
|
if (isFirst) {
|
||||||
$mountedComponents[index] = true
|
$mountedComponents[index] = true
|
||||||
}
|
}
|
||||||
|
console.log('appear:' + index);
|
||||||
|
// if($common.isIos&&!initing){
|
||||||
|
// console.log('appear:'+index);
|
||||||
|
// nowIndex.value = index
|
||||||
|
// const item = props.list[nowIndex.value]
|
||||||
|
// if (!item.videoUrl) {
|
||||||
|
// popupShow('pay', item, nowIndex.value)
|
||||||
|
// }
|
||||||
|
// cacheIndex = null
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
if($common.isIos){
|
||||||
|
nowIndex.value = index
|
||||||
|
const item = props.list[nowIndex.value]
|
||||||
|
if (!item.videoUrl) {
|
||||||
|
popupShow('pay', item, nowIndex.value)
|
||||||
|
}
|
||||||
|
cacheIndex = null
|
||||||
|
return
|
||||||
|
}
|
||||||
if (!initing) {
|
if (!initing) {
|
||||||
cacheIndex = index
|
cacheIndex = index
|
||||||
}
|
}
|
||||||
if($common.isIos){
|
|
||||||
console.log('appear:'+index);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function disappear(item, index) {
|
function disappear(e, item, index) {
|
||||||
|
if ($common.isIos) {
|
||||||
if (index == nowIndex.value && cacheIndex != null && !initing) {
|
if(e.direction=='up'){
|
||||||
|
cacheIndex=nowIndex.value-1<0?0:nowIndex.value-1
|
||||||
|
}else{
|
||||||
|
cacheIndex=(nowIndex.value+1>(props.list.length-1)) ? props.list.length-1:nowIndex.value+1
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (index == nowIndex.value && cacheIndex !== null && !initing) {
|
||||||
console.log('disappear' + index);
|
console.log('disappear' + index);
|
||||||
console.log('disappear nowIndex' + nowIndex.value);
|
console.log('disappear nowIndex' + nowIndex.value);
|
||||||
console.log('cacheIndex' + cacheIndex);
|
console.log('cacheIndex' + cacheIndex);
|
||||||
@@ -693,15 +726,14 @@
|
|||||||
let item = props.list.find(v => props.options.courseDetailsId == v.courseDetailsId)
|
let item = props.list.find(v => props.options.courseDetailsId == v.courseDetailsId)
|
||||||
item = item ? item : props.info.current;
|
item = item ? item : props.info.current;
|
||||||
if (JSON.stringify(item) !== '{}') {
|
if (JSON.stringify(item) !== '{}') {
|
||||||
// #ifdef H5
|
if(showAndriod){
|
||||||
setVideoList(item)
|
nextTick(() => {
|
||||||
// #endif
|
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
|
||||||
// #ifdef APP
|
goListPosition(index)
|
||||||
nextTick(() => {
|
})
|
||||||
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
|
}else{
|
||||||
goListPosition(index)
|
setVideoList(item)
|
||||||
})
|
}
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -884,9 +916,9 @@
|
|||||||
})
|
})
|
||||||
watch(() => props.list.length, (newval) => {
|
watch(() => props.list.length, (newval) => {
|
||||||
console.log('props.list.length change' + newval);
|
console.log('props.list.length change' + newval);
|
||||||
// #ifdef H5
|
if(!showAndriod){
|
||||||
init()
|
init()
|
||||||
// #endif
|
}
|
||||||
})
|
})
|
||||||
watch(() => nowIndex.value, (newval) => {})
|
watch(() => nowIndex.value, (newval) => {})
|
||||||
const nowDanjiPrice = computed(() => {
|
const nowDanjiPrice = computed(() => {
|
||||||
|
|||||||
@@ -39,6 +39,7 @@
|
|||||||
isFirstLoad = false
|
isFirstLoad = false
|
||||||
Object.assign(state, res)
|
Object.assign(state, res)
|
||||||
state.list = res.list
|
state.list = res.list
|
||||||
|
console.log(state.list);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// if(getCurrentPages().length>=2){
|
// if(getCurrentPages().length>=2){
|
||||||
// uni.navigateBack()
|
// uni.navigateBack()
|
||||||
|
|||||||
Reference in New Issue
Block a user