提交 38ac698c 编写于 作者: 雪洛's avatar 雪洛

chore: 格式化代码

上级 a6d45c06
<template> <template>
<view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)" <view class="card" ref="card" @touchstart="touchstart($event as TouchEvent)"
@touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend"> @touchmove="touchmove($event as TouchEvent)" @touchend="touchend" @touchcancel="touchend">
<image class="card-img" ref="card-img" :src="img"></image> <image class="card-img" ref="card-img" :src="img"></image>
<view class="state"> <view class="state">
<image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix"> <image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix">
</image> </image>
<image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png" <image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png"
mode="widthFix"></image> mode="widthFix"></image>
<!-- cardIndex:{{cardIndex}} --> <!-- cardIndex:{{cardIndex}} -->
</view>
</view> </view>
</view>
</template> </template>
<script> <script>
let sX : number = 0, let sX : number = 0,
...@@ -21,22 +21,22 @@ ...@@ -21,22 +21,22 @@
export default { export default {
data() { data() {
return { return {
$elementMap:new Map<string, Element>(), $elementMap: new Map<string, Element>(),
x: 0 as number, x: 0 as number,
y: 0 as number, y: 0 as number,
// 飘走的卡片计数 // 飘走的卡片计数
floatCount:0 as number floatCount: 0 as number
} }
}, },
props: { props: {
img: { img: {
type: String, type: String,
default: "/static/template/drop-card/1.jpg" default: "/static/template/drop-card/1.jpg"
}, },
cardIndex:{ cardIndex: {
type:Number, type: Number,
default:0 default: 0
} }
}, },
computed: { computed: {
movePercent() : number { movePercent() : number {
...@@ -47,47 +47,47 @@ ...@@ -47,47 +47,47 @@
}, },
dislikeOpacity() : number { dislikeOpacity() : number {
return this.x > 0 ? 0 : this.movePercent * 100 return this.x > 0 ? 0 : this.movePercent * 100
} }
},
mounted() {
uni.getSystemInfo({
success: (e) => {
screenWidth = e.screenWidth;
screenHeight = e.screenHeight;
}
})
// TODO 需要延迟设置才能生效
setTimeout(()=>{
this.setElementStyle('card','height', screenHeight * 0.7 + 'px');
this.setElementStyle('card-img','height', screenHeight * 0.7 + 'px');
this.initCardStyle()
},200)
uni.$on('uni-drop-card-float',()=>{
this.floatCount ++
this.initCardStyle()
})
}, },
methods: { mounted() {
initCardStyle(){ uni.getSystemInfo({
let _index = (this.cardIndex + this.floatCount)%3 success: (e) => {
// console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount); screenWidth = e.screenWidth;
this.setElementStyle('card','z-index', _index) screenHeight = e.screenHeight;
this.setElementStyle('card','margin-top', screenHeight * 0.15 - 30 * _index + 'px'); }
this.setElementStyle('card','transform', 'scale('+(0.9 + 0.05 * _index)+')') })
},
// TODO 需要延迟设置才能生效
setTimeout(() => {
this.setElementStyle('card', 'height', screenHeight * 0.7 + 'px');
this.setElementStyle('card-img', 'height', screenHeight * 0.7 + 'px');
this.initCardStyle()
}, 200)
uni.$on('uni-drop-card-float', () => {
this.floatCount++
this.initCardStyle()
})
},
methods: {
initCardStyle() {
let _index = (this.cardIndex + this.floatCount) % 3
// console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
this.setElementStyle('card', 'z-index', _index)
this.setElementStyle('card', 'margin-top', screenHeight * 0.15 - 30 * _index + 'px');
this.setElementStyle('card', 'transform', 'scale(' + (0.9 + 0.05 * _index) + ')')
},
// 工具方法,用于快速设置 Element 的 style // 工具方法,用于快速设置 Element 的 style
setElementStyle(refName:string,propertyName : string, propertyStyle : any) : void { setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
const elementMap = this.$data['$elementMap'] as Map<string, Element> const elementMap = this.$data['$elementMap'] as Map<string, Element>
let element : Element | null = elementMap[refName] let element : Element | null = elementMap[refName]
if(element == null){ if (element == null) {
element = this.$refs[refName] as Element; element = this.$refs[refName] as Element;
elementMap[refName] = element elementMap[refName] = element
}else{ } else {
// console.log('直接拿'); // console.log('直接拿');
} }
element?.style?.setProperty(propertyName, propertyStyle); element?.style?.setProperty(propertyName, propertyStyle);
}, },
touchstart(e : TouchEvent) { touchstart(e : TouchEvent) {
...@@ -114,85 +114,85 @@ ...@@ -114,85 +114,85 @@
this.moveCard() this.moveCard()
}, },
touchend() { touchend() {
// console.log('touchend') // console.log('touchend')
touchstartAfter = false touchstartAfter = false
if(floating){ if (floating) {
return // 浮动动画进行中 return // 浮动动画进行中
} }
floating = true floating = true
// 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左 // 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
let k:number = 0; let k : number = 0;
if (this.x > screenWidth / 10 ) { if (this.x > screenWidth / 10) {
k = 1 k = 1
}else if(this.x < screenWidth * -1 / 10){ } else if (this.x < screenWidth * -1 / 10) {
k = -1 k = -1
} }
function cardTo(x:number,y:number,callback: () => void,speed:number = 10){ function cardTo(x : number, y : number, callback : () => void, speed : number = 10) {
let interval:number = 0 let interval : number = 0
let acceleration:number = 1 let acceleration : number = 1
interval = setInterval(()=>{ interval = setInterval(() => {
// 加速度 // 加速度
acceleration += 0.2 acceleration += 0.2
const dx = x - this.x const dx = x - this.x
if(Math.abs(dx) < 1){ if (Math.abs(dx) < 1) {
this.x = x this.x = x
}else{ } else {
this.x += dx/speed*acceleration this.x += dx / speed * acceleration
} }
const dy = y - this.y const dy = y - this.y
if(Math.abs(dy) < 1){ if (Math.abs(dy) < 1) {
this.y = y this.y = y
}else{ } else {
this.y += dy/speed*acceleration this.y += dy / speed * acceleration
} }
this.moveCard() this.moveCard()
if( this.x == x && this.y == y){ if (this.x == x && this.y == y) {
clearInterval(interval) clearInterval(interval)
callback() callback()
} }
},16) }, 16)
} }
if(k.toInt() != 0){ if (k.toInt() != 0) {
cardTo(k * screenWidth * 1.3, this.y * 3,()=>{ cardTo(k * screenWidth * 1.3, this.y * 3, () => {
// 状态图标变回透明 // 状态图标变回透明
this.setElementStyle("state-icon-like",'opacity', 0) this.setElementStyle("state-icon-like", 'opacity', 0)
this.setElementStyle("state-icon-dislike",'opacity', 0) this.setElementStyle("state-icon-dislike", 'opacity', 0)
// 设置为透明,防止飘回时因为 margin-top 太高,露出来 // 设置为透明,防止飘回时因为 margin-top 太高,露出来
this.setElementStyle("card",'opacity', 0) this.setElementStyle("card", 'opacity', 0)
setTimeout(()=>{ setTimeout(() => {
this.setElementStyle("card",'opacity', 1) this.setElementStyle("card", 'opacity', 1)
},300) }, 300)
// 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行 // 执行卡片飘动后事件,注意uni.$emit是全局事件。其他卡片也会执行
uni.$emit('uni-drop-card-float',null) uni.$emit('uni-drop-card-float', null)
floating = false floating = false
},8) }, 8)
}else{ } else {
const _x:number = this.x const _x : number = this.x
const _y:number = this.y const _y : number = this.y
cardTo( (_x*-0.05).toInt() , (_y*-0.05).toInt() ,()=>{ cardTo((_x * -0.05).toInt(), (_y * -0.05).toInt(), () => {
cardTo(0,0,()=>{ cardTo(0, 0, () => {
console.log('bounce') console.log('bounce')
floating = false floating = false
},30) }, 30)
}) })
} }
}, },
moveCard() { moveCard() {
this.setElementStyle("card", this.setElementStyle("card",
'transform', 'transform',
`translate(${this.x}px,${this.y}px) rotate(${this.x/-30}deg) scale(1)` `translate(${this.x}px,${this.y}px) rotate(${this.x / -30}deg) scale(1)`
) )
this.setElementStyle("state-icon-like",'opacity', this.x < 0 ? 0 : this.movePercent * 10) this.setElementStyle("state-icon-like", 'opacity', this.x < 0 ? 0 : this.movePercent * 10)
this.setElementStyle("state-icon-dislike",'opacity', this.x > 0 ? 0 : this.movePercent * 10) this.setElementStyle("state-icon-dislike", 'opacity', this.x > 0 ? 0 : this.movePercent * 10)
} }
} }
} }
</script> </script>
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: #FFF; background-color: #FFF;
transition: margin-top 300ms; transition: margin-top 300ms;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
.card-img { .card-img {
...@@ -239,4 +239,4 @@ ...@@ -239,4 +239,4 @@
box-shadow: 0 0 1px #EBEBEB; box-shadow: 0 0 1px #EBEBEB;
opacity: 0; opacity: 0;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<view class="page"> <view class="page">
<view @click="back" class="nav-back"> <view @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image> <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view> </view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition"> <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i"> @transition="onTransition">
<video @click="changeState(i)" ref="video" class="video-box" objectFit="cover" :id="'video-'+i" <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
@loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" <video @click="changeState(i)" ref="video" class="video-box" objectFit="cover" :id="'video-'+i"
:autoplay="false" :show-center-play-btn="false" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :autoplay="false"
:loop="true" @play="onPlay(i)" @pause="onPause(i)" :show-center-play-btn="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
></video> <view class="video-cover" @click="changeState(i)">
<view class="video-cover" @click="changeState(i)"> <image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png"
<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image> mode="widthFix"></image>
</view> </view>
<view class="video-info" v-if="0"> <view class="video-info" v-if="0">
<text class="video-info-text">容器:第 {{i}} 个</text> <text class="video-info-text">容器:第 {{i}} 个</text>
<text class="video-info-text">内容:{{item.content}}</text> <text class="video-info-text">内容:{{item.content}}</text>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="debug-info" v-if="0"> <view class="debug-info" v-if="0">
<text class="status-text">debug-info 播放状态:</text> <text class="status-text">debug-info 播放状态:</text>
<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text> <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
type ListItem = { _id : string, content : string, src : string, poster_src : string } type ListItem = { _id : string, content : string, src : string, poster_src : string }
let page : number = 0, let page : number = 0,
currentPageIsShow : boolean = true; currentPageIsShow : boolean = true;
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
$videoContextMap: new Map<string, VideoContext>(), $videoContextMap: new Map<string, VideoContext>(),
list: [] as ListItem[], list: [] as ListItem[],
visibleList: [] as ListItem[],// 提高性能 可见的只有3个 visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number, current: 0 as number,
index: 0, index: 0,
state: ["unPlay", "unPlay", "unPlay"] as string[] state: ["unPlay", "unPlay", "unPlay"] as string[]
} }
}, },
created() { created() {
this.list = this.getData() this.list = this.getData()
this.visibleList = this.list.slice(0, 3) this.visibleList = this.list.slice(0, 3)
}, },
watch: { watch: {
current(current : number, oldCurrent : number) { current(current : number, oldCurrent : number) {
let changeNumber = current - oldCurrent let changeNumber = current - oldCurrent
if (changeNumber == 1 || changeNumber == -2) { if (changeNumber == 1 || changeNumber == -2) {
// console.error('向右'); // console.error('向右');
this.index++ this.index++
} else { } else {
// console.error('向左'); // console.error('向左');
this.index-- this.index--
} }
// //翻页(3项为一页) // //翻页(3项为一页)
if (Math.abs(changeNumber) == 2) { if (Math.abs(changeNumber) == 2) {
// console.log('翻页'); // console.log('翻页');
page = Math.floor(this.index / 3); page = Math.floor(this.index / 3);
// console.log(this.index); // console.log(this.index);
// console.log('page',page); // console.log('page',page);
// console.log('slice',3*page,3*page+3); // console.log('slice',3*page,3*page+3);
if (this.list.length < 3 * page + 3) { if (this.list.length < 3 * page + 3) {
let list : ListItem[] = this.getData() let list : ListItem[] = this.getData()
this.list.push(...list) this.list.push(...list)
} }
let visibleList = this.list.slice(3 * page, 3 * page + 3) let visibleList = this.list.slice(3 * page, 3 * page + 3)
// 换数据 // 换数据
this.visibleList = visibleList this.visibleList = visibleList
} }
this.state.forEach((_ : string, index : number) => { this.state.forEach((_ : string, index : number) => {
if (index === current) { if (index === current) {
this.doPlay(current) this.doPlay(current)
} else { } else {
// 除了选中的其他已经播放的都需要停止 // 除了选中的其他已经播放的都需要停止
this.doStop(index) this.doStop(index)
console.log('index:' + index + '已被执行停止'); console.log('index:' + index + '已被执行停止');
} }
}) })
} }
}, },
onReady() { onReady() {
// 一启动完成,就播放第一个 // 一启动完成,就播放第一个
this.doPlay(0) this.doPlay(0)
}, },
onShow(){ onShow() {
currentPageIsShow = true currentPageIsShow = true
}, },
onHide() { onHide() {
currentPageIsShow = false currentPageIsShow = false
console.log('pages-onHide'); console.log('pages-onHide');
this.doPause(this.current) this.doPause(this.current)
},
onUnload() {
this.doPause(this.current)
}, },
methods: { onUnload() {
changeState(index : number) { this.doPause(this.current)
if (this.state[index] === 'play') { },
this.doPause(index) methods: {
} else { changeState(index : number) {
this.doPlay(this.current) if (this.state[index] === 'play') {
} this.doPause(index)
}, } else {
onLoadstart(index : number) { this.doPlay(this.current)
console.error("onLoadstart video" + index ); }
}, },
getVideoContext(index : number) : VideoContext { onLoadstart(index : number) {
const videoContextMap = this.$data['$videoContextMap'] as Map<string, VideoContext> console.error("onLoadstart video" + index);
let videoContext : VideoContext | null = videoContextMap['video-'+index] },
if(videoContext == null){ getVideoContext(index : number) : VideoContext {
videoContext = uni.createVideoContext('video-'+index, this) as VideoContext const videoContextMap = this.$data['$videoContextMap'] as Map<string, VideoContext>
videoContextMap['video-'+index] = videoContext let videoContext : VideoContext | null = videoContextMap['video-' + index]
} if (videoContext == null) {
return videoContext videoContext = uni.createVideoContext('video-' + index, this) as VideoContext
videoContextMap['video-' + index] = videoContext
}
return videoContext
}, },
doPlay(index : number) { doPlay(index : number) {
console.log("doPlay video" + index ); console.log("doPlay video" + index);
this.getVideoContext(index).play() this.getVideoContext(index).play()
},
doStop(index : number) {
console.log("doStop video-" + index);
this.getVideoContext(index).stop();
// TODO 临时方案:解决.stop()时触发了doPause的问题
setTimeout(()=>{
this.state[index] = 'unPlay'
},1000)
},
doPause(index : number) {
this.getVideoContext(index).pause()
console.log("doPause video-" + index);
}, },
onPause(index : number) { doStop(index : number) {
this.state[index] = 'pause' console.log("doStop video-" + index);
console.log('onPause', index); this.getVideoContext(index).stop();
}, // TODO 临时方案:解决.stop()时触发了doPause的问题
onPlay(index : number) { setTimeout(() => {
if(this.current != index || !currentPageIsShow){ this.state[index] = 'unPlay'
this.onPause(index) }, 1000)
}else{ },
this.state[index] = 'play' doPause(index : number) {
console.log('onPlay', index); this.getVideoContext(index).pause()
console.log("doPause video-" + index);
},
onPause(index : number) {
this.state[index] = 'pause'
console.log('onPause', index);
},
onPlay(index : number) {
if (this.current != index || !currentPageIsShow) {
this.onPause(index)
} else {
this.state[index] = 'play'
console.log('onPlay', index);
} }
}, },
getData() : ListItem[] { getData() : ListItem[] {
let videoUrlList = [ let videoUrlList = [
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4', 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-ai.mp4', 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-ai.mp4',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-verify.mp4' 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-verify.mp4'
] as string[] ] as string[]
let posterSrcList = [ let posterSrcList = [
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-uts.jpg', 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-uts.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-ai.jpg', 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-ai.jpg',
'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-verify.jpg' 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-verify.jpg'
] as string[] ] as string[]
let list = [] as ListItem[]; let list = [] as ListItem[];
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
let index = this.list.length + i; let index = this.list.length + i;
let listItem : ListItem = { let listItem : ListItem = {
"_id": "a00" + index, "_id": "a00" + index,
"content": "这是第" + index + "条数据,url地址" + videoUrlList[i % 3], "content": "这是第" + index + "条数据,url地址" + videoUrlList[i % 3],
"src": videoUrlList[i % 3], "src": videoUrlList[i % 3],
"poster_src": posterSrcList[i % 3] "poster_src": posterSrcList[i % 3]
} }
list.push(listItem) list.push(listItem)
} }
return list return list
}, },
onSwiperChange(e : SwiperChangeEvent) { onSwiperChange(e : SwiperChangeEvent) {
// console.error('SwiperChangeEvent',e.detail.current); // console.error('SwiperChangeEvent',e.detail.current);
this.current = e.detail.current; this.current = e.detail.current;
}, },
onTransition(/*e : SwiperTransitionEvent*/) { onTransition(/*e : SwiperTransitionEvent*/) {
// console.log('onTransition e.detail.dx', e.detail.dx); // console.log('onTransition e.detail.dx', e.detail.dx);
}, },
back() { back() {
uni.navigateBack({ uni.navigateBack({
success(result) { success(result) {
console.log('navigateBack success', result.errMsg) console.log('navigateBack success', result.errMsg)
}, },
fail(error) { fail(error) {
console.log('navigateBack fail', error.errMsg) console.log('navigateBack fail', error.errMsg)
}, },
complete(result) { complete(result) {
console.log('navigateBack complete', result.errMsg) console.log('navigateBack complete', result.errMsg)
} }
}) })
} }
} }
} }
</script> </script>
<style> <style>
.page { .page {
width: 750rpx; width: 750rpx;
flex: 1; flex: 1;
} }
.swiper, .swiper,
.swiper-item, .swiper-item,
.video-box, .video-box,
.video-cover { .video-cover {
width:750rpx; width: 750rpx;
flex: 1; flex: 1;
height: 100%; height: 100%;
} }
.swiper-item { .swiper-item {
position: relative; position: relative;
} }
.video-box { .video-box {
width: 750rpx; width: 750rpx;
} }
.video-cover { .video-cover {
position: absolute; position: absolute;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
}
.play-btn {
width: 80rpx;
height: 80rpx;
} }
.video-info { .play-btn {
position: absolute; width: 80rpx;
bottom: 0; height: 80rpx;
padding: 15px; }
}
.video-info-text { .video-info {
font-size: 14px; position: absolute;
color: red; bottom: 0;
line-height: 20px; padding: 15px;
} }
.debug-info{ .video-info-text {
position: fixed; font-size: 14px;
top:15px; color: red;
width: 750rpx; line-height: 20px;
background-color: rgba(255, 255, 255, 0.3); }
}
.status-text{ .debug-info {
color:red; position: fixed;
padding: 15px; top: 15px;
} width: 750rpx;
background-color: rgba(255, 255, 255, 0.3);
.nav-back { }
position: absolute;
top: 20px; .status-text {
left: 8px; color: red;
background-color: rgba(220, 220, 220, 0.8); padding: 15px;
border-radius: 100px; }
width: 28px;
height: 28px; .nav-back {
justify-content: center; position: absolute;
align-items: center; top: 20px;
z-index: 10; left: 8px;
} background-color: rgba(220, 220, 220, 0.8);
border-radius: 100px;
.nav-back .back-img { width: 28px;
width: 18px; height: 28px;
height: 18px; justify-content: center;
} align-items: center;
</style> z-index: 10;
}
.nav-back .back-img {
width: 18px;
height: 18px;
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册