zyronon
3 years ago
8 changed files with 153 additions and 1052 deletions
@ -1,401 +0,0 @@
@@ -1,401 +0,0 @@
|
||||
<template> |
||||
<div id="home-index" v-love="'home-index'"> |
||||
<SlideHorizontal> |
||||
<div class="slide-item"> |
||||
<IndicatorHome |
||||
v-hide="isUp" |
||||
:loading="loading" |
||||
name="main" |
||||
v-model:index="baseIndex" |
||||
/> |
||||
<SlideHorizontal |
||||
name="main" |
||||
v-model:index="baseIndex" |
||||
style="height: calc(100% - 50rem);" |
||||
> |
||||
<div class="slide-item"> |
||||
<div class="nav-one" :class="{close:closeOne}"> |
||||
<div class="nav-item"> |
||||
<img src="../../assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>美食</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="../../assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>休闲娱乐</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="../../assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>游玩</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="../../assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>丽人/美发</span> |
||||
</div> |
||||
<div class="nav-item"> |
||||
<img src="../../assets/img/icon/msg-icon9.webp" alt=""> |
||||
<span>住宿</span> |
||||
</div> |
||||
</div> |
||||
<SlideVerticalInfinite |
||||
name="main" |
||||
:style="marginTop" |
||||
ref="virtualList" |
||||
:list="videos" |
||||
:prefix="videoPrefix[0]" |
||||
:renderSlide="render" |
||||
v-model:index="videoIndex" |
||||
@end="end" |
||||
@load-more="loadMore" |
||||
/> |
||||
</div> |
||||
</SlideHorizontal> |
||||
<Footer v-bind:init-tab="1"/> |
||||
</div> |
||||
<div class="slide-item"> |
||||
<p v-for="i in 100">2</p> |
||||
</div> |
||||
</SlideHorizontal> |
||||
|
||||
<Comment v-model="isUp"/> |
||||
|
||||
<Share v-model="isSharing" |
||||
ref="share" |
||||
page-id="home-index" |
||||
@dislike="dislike" |
||||
:videoId="videos[videoIndex]?.id" |
||||
:canDownload="videos[videoIndex]?.canDownload" |
||||
@play-feedback="showPlayFeedback = true" |
||||
@showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)" |
||||
@shareToFriend="delayShowDialog(e => this.shareToFriend = true)" |
||||
@showDouyinCode="showDouyinCode = true" |
||||
@showShare2WeChatZone="shareType = 2" |
||||
@share2WeChat="shareType = 3" |
||||
@share2QQZone="shareType = 4" |
||||
@share2QQ="shareType = 5" |
||||
@share2Webo="shareType = 8" |
||||
@download="shareType = 9" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="jsx"> |
||||
import SlideHorizontal from './SlideHorizontal' |
||||
import SlideVertical from './SlideVertical' |
||||
import BVideo from "../../components/slide/BVideo"; |
||||
import resource from "../../assets/data/resource"; |
||||
import Dom from "../../utils/dom"; |
||||
import Footer from "../../components/Footer"; |
||||
import Loading from "../../components/Loading"; |
||||
import {mapState} from "vuex"; |
||||
import IndicatorHome from "./IndicatorHome"; |
||||
import SlideVerticalInfinite from "./SlideVerticalInfinite"; |
||||
import Comment from "../../components/Comment"; |
||||
import enums from "../../utils/enums"; |
||||
import bus from "../../utils/bus"; |
||||
import FromBottomDialog from "../../components/dialog/FromBottomDialog"; |
||||
import SlideColumnList from "../../components/slide/SlideColumnList"; |
||||
import SlideRowList from "../../components/slide/SlideRowList"; |
||||
import Video1 from "../../components/Video"; |
||||
import Share from "../../components/Share"; |
||||
import Uploader from "../me/Uploader"; |
||||
import PlayFeedback from "../home/components/PlayFeedback"; |
||||
import Duoshan from "../home/components/Duoshan"; |
||||
import ShareTo from "../home/components/ShareTo"; |
||||
import DouyinCode from "../../components/DouyinCode"; |
||||
import FollowSetting from "../home/components/FollowSetting"; |
||||
import FollowSetting2 from "../home/components/FollowSetting2"; |
||||
import BlockDialog from "../message/components/BlockDialog"; |
||||
import Search from "../../components/Search"; |
||||
import ConfirmDialog from "../../components/dialog/ConfirmDialog"; |
||||
import ShareToFriend from "../home/components/ShareToFriend"; |
||||
|
||||
export default { |
||||
name: "slide", |
||||
components: { |
||||
SlideHorizontal, |
||||
SlideVertical, |
||||
SlideVerticalInfinite, |
||||
BVideo, |
||||
Footer, |
||||
IndicatorHome, |
||||
FromBottomDialog, |
||||
SlideColumnList, |
||||
SlideRowList, |
||||
Video1, |
||||
Comment, |
||||
Share, |
||||
Uploader, |
||||
PlayFeedback, |
||||
Duoshan, |
||||
ShareTo, |
||||
DouyinCode, |
||||
FollowSetting, |
||||
FollowSetting2, |
||||
BlockDialog, |
||||
Search, |
||||
ConfirmDialog, |
||||
ShareToFriend |
||||
}, |
||||
data() { |
||||
return { |
||||
baseIndex: 0, |
||||
videoIndex: 0, |
||||
closeOne: true, |
||||
videoPrefix: ['one', 'two', 'three'], |
||||
loading: false, |
||||
videos: [], |
||||
totalSize: 52, |
||||
pageSize: 10, |
||||
pageNo: 0, |
||||
isUp: false, |
||||
|
||||
isCommenting: false, |
||||
isSharing: false, |
||||
canMove: true, |
||||
|
||||
shareType: -1, |
||||
|
||||
showPlayFeedback: false, |
||||
showShareDuoshan: false, |
||||
showShareDialog: false, |
||||
showShare2WeChatZone: false, |
||||
showDouyinCode: false, |
||||
showFollowSetting: false, |
||||
showFollowSetting2: false, |
||||
showBlockDialog: false, |
||||
showChangeNote: false, |
||||
shareToFriend: false, |
||||
|
||||
render: (item, itemIndex, play, prefix) => { |
||||
return ( |
||||
<div class="slide-item" data-index={itemIndex}> |
||||
<BVideo |
||||
isPlay={play} |
||||
item={item} |
||||
prefix={prefix} |
||||
index={itemIndex} |
||||
onShowComments={e => this.isCommenting = true} |
||||
onShowShare={e => this.isSharing = true} |
||||
onGoUserInfo={e => this.baseActiveIndex = 1} |
||||
onGoMusic={e => this.$nav('/home/music')} |
||||
v-model={[this.videos[itemIndex], 'video']} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapState([ |
||||
'friends', |
||||
'bodyHeight', |
||||
'bodyWidth' |
||||
]), |
||||
marginTop() { |
||||
if (!this.isUp) return {'transition-duration': '300ms',} |
||||
return { |
||||
transform: `translate3d(0,-${((this.bodyHeight - 50) / 2) - (this.$refs.bvideo.videoScreenHeight / 2)}px,0)`, |
||||
'transition-duration': '300ms', |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.getData() |
||||
bus.on('singleClick', () => { |
||||
new Dom(`.v-${this.videoPrefix[this.baseIndex]}-${this.videoIndex}-video`).trigger('singleClick') |
||||
}) |
||||
bus.on(this.videoPrefix[this.baseIndex] + '-loading', () => { |
||||
console.log('loading') |
||||
this.getData(true) |
||||
}) |
||||
}, |
||||
mounted() { |
||||
}, |
||||
methods: { |
||||
delayShowDialog(cb) { |
||||
setTimeout(() => { |
||||
cb() |
||||
}, 400) |
||||
}, |
||||
dislike() { |
||||
this.$refs.virtualList.dislike(this.videos[10]) |
||||
this.videos[this.videoIndex] = this.videos[10] |
||||
this.$notice('操作成功，将减少此类视频的推荐') |
||||
}, |
||||
loadMore() { |
||||
// return |
||||
if (!this.loading) { |
||||
this.pageNo++ |
||||
this.getData() |
||||
} |
||||
}, |
||||
t() { |
||||
this.isUp = !this.isUp |
||||
}, |
||||
changeIndex() { |
||||
this.closeOne = !this.closeOne |
||||
}, |
||||
async getData(refresh = false) { |
||||
if (this.loading) return |
||||
this.loading = true |
||||
let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize}) |
||||
// console.log(res) |
||||
this.loading = false |
||||
if (res.code === this.SUCCESS) { |
||||
this.totalSize = res.data.total |
||||
if (refresh) { |
||||
this.videos = [] |
||||
} |
||||
this.videos = this.videos.concat(res.data.list) |
||||
if (refresh) { |
||||
this.$refs.virtualList.refresh(this.videos) |
||||
} |
||||
} else { |
||||
this.pageNo-- |
||||
} |
||||
}, |
||||
end() { |
||||
this.$notice('暂时没有更多了') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
#home-index { |
||||
height: 100vh; |
||||
width: 100vw; |
||||
color: white; |
||||
} |
||||
|
||||
.slide { |
||||
height: 100%; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
.slide-wrapper { |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
//transform: translateX(1rem); |
||||
} |
||||
|
||||
.slide-item { |
||||
width: 100%; |
||||
min-width: 100%; |
||||
height: 100%; |
||||
min-height: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
.nav-one { |
||||
height: 140rem; |
||||
box-sizing: border-box; |
||||
background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16)); |
||||
transition: all .3s; |
||||
padding: 2rem; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
justify-content: space-between; |
||||
|
||||
.nav-item { |
||||
@width: 35rem; |
||||
display: flex; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
|
||||
img { |
||||
width: @width; |
||||
height: @width; |
||||
margin-bottom: 5rem; |
||||
} |
||||
} |
||||
|
||||
&.close { |
||||
margin-top: -140rem; |
||||
} |
||||
} |
||||
|
||||
@space-width: 15rem; |
||||
@icon-width: 52rem; |
||||
|
||||
.nav-two { |
||||
height: 180rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-end; |
||||
box-sizing: border-box; |
||||
padding: @space-width; |
||||
transition: .3s; |
||||
|
||||
.title { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
margin-bottom: 15rem; |
||||
|
||||
.right { |
||||
color: gray; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
img { |
||||
width: 10rem; |
||||
height: 10rem; |
||||
margin-left: 4rem; |
||||
} |
||||
} |
||||
|
||||
.users { |
||||
display: flex; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
.user { |
||||
width: @icon-width; |
||||
position: relative; |
||||
margin-right: @space-width; |
||||
font-size: 10rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
.avatar { |
||||
width: @icon-width; |
||||
height: @icon-width; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
span { |
||||
margin-top: 8rem; |
||||
text-align: center; |
||||
width: @icon-width; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
|
||||
.tag { |
||||
background: rgb(239, 46, 137); |
||||
border-radius: 2rem; |
||||
padding: 0 2rem; |
||||
bottom: 18rem; |
||||
position: absolute; |
||||
font-size: 10rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.close { |
||||
margin-top: -180rem; |
||||
} |
||||
} |
||||
|
||||
|
||||
</style> |
||||
@ -1,136 +0,0 @@
@@ -1,136 +0,0 @@
|
||||
<script lang="jsx"> |
||||
import bus from "../../utils/bus"; |
||||
import {mapState} from "vuex"; |
||||
|
||||
export default { |
||||
props: { |
||||
name: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
index: { |
||||
type: Number, |
||||
default: () => 0 |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapper: null, |
||||
childs: 0, |
||||
lIndex: 0, |
||||
wrapperWidth: 0, |
||||
wrapperHeight: 0, |
||||
moveX: 0, |
||||
moveY: 0, |
||||
startX: 0, |
||||
startY: 0, |
||||
needCheck: true, |
||||
next: false, |
||||
startTime: null |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapState(['judgeValue']) |
||||
}, |
||||
mounted() { |
||||
this.wrapper = this.$refs.wrapper |
||||
this.childs = this.wrapper.children.length |
||||
this.wrapperWidth = this.$getCss(this.wrapper, 'width') |
||||
this.wrapperHeight = this.$getCss(this.wrapper, 'height') |
||||
}, |
||||
watch: { |
||||
index(newVal) { |
||||
this.lIndex = newVal |
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(${this.getDistance()}px, 0, 0)`) |
||||
} |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.$setCss(this.wrapper, 'transition-duration', `0ms`) |
||||
this.startX = e.touches[0].pageX |
||||
this.startY = e.touches[0].pageY |
||||
this.startTime = Date.now() |
||||
}, |
||||
touchMove(e) { |
||||
this.moveX = e.touches[0].pageX - this.startX |
||||
this.moveY = e.touches[0].pageY - this.startY |
||||
|
||||
let isRight = this.moveX < 0 |
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.childs - 1 && isRight)) return |
||||
|
||||
|
||||
this.checkDirection(e) |
||||
|
||||
if (this.next) { |
||||
bus.emit(this.name + '-moveX', this.moveX) |
||||
|
||||
this.$stopPropagation(e) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(${this.getDistance() |
||||
+ this.moveX |
||||
+ (isRight ? this.judgeValue : -this.judgeValue) |
||||
}px, 0, 0)`) |
||||
} |
||||
}, |
||||
checkDirection(e) { |
||||
if (!this.needCheck) return |
||||
if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) { |
||||
let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10) |
||||
this.next = angle > 1; |
||||
// console.log(angle) |
||||
return this.needCheck = false |
||||
} |
||||
return this.needCheck = true |
||||
}, |
||||
touchEnd(e) { |
||||
let isRight = this.moveX < 0 |
||||
if ((this.lIndex === 0 && !isRight) || (this.lIndex === this.childs - 1 && isRight)) this.next = false |
||||
|
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
if (Math.abs(this.moveX) < 20) gapTime = 1000 |
||||
if (Math.abs(this.moveX) > (this.wrapperWidth / 4)) gapTime = 100 |
||||
if (gapTime < 150 && this.next) { |
||||
if (isRight) { |
||||
this.lIndex++ |
||||
} else { |
||||
this.lIndex-- |
||||
} |
||||
} |
||||
this.reset() |
||||
}, |
||||
reset() { |
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(${this.getDistance()}px, 0, 0)`) |
||||
|
||||
this.moveX = 0 |
||||
this.next = false |
||||
this.needCheck = true |
||||
this.startTime = null |
||||
this.$emit('update:index', this.lIndex) |
||||
bus.emit(this.name + '-end', this.lIndex) |
||||
}, |
||||
getDistance() { |
||||
return -this.lIndex * this.wrapperWidth |
||||
}, |
||||
}, |
||||
|
||||
render(createElement, context) { |
||||
return ( |
||||
<div className="slide"> |
||||
<div className="slide-wrapper" |
||||
ref="wrapper" |
||||
ontouchstart={this.touchStart.bind(this)} |
||||
ontouchmove={this.touchMove.bind(this)} |
||||
ontouchend={this.touchEnd.bind(this)} |
||||
> |
||||
{this.$slots.default()} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,129 +0,0 @@
@@ -1,129 +0,0 @@
|
||||
<script lang="jsx"> |
||||
import bus from "../../utils/bus"; |
||||
import {mapState} from "vuex"; |
||||
|
||||
export default { |
||||
props: { |
||||
name: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapper: null, |
||||
total: 0, |
||||
index: 0, |
||||
wrapperWidth: 0, |
||||
wrapperHeight: 0, |
||||
moveX: 0, |
||||
moveY: 0, |
||||
startX: 0, |
||||
startY: 0, |
||||
needCheck: true, |
||||
next: false, |
||||
startTime: null |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapState(['judgeValue', 'homeRefresh']) |
||||
}, |
||||
mounted() { |
||||
this.wrapper = this.$refs.wrapper |
||||
this.total = this.wrapper.children.length |
||||
this.wrapperWidth = this.$getCss(this.wrapper, 'width') |
||||
this.wrapperHeight = this.$getCss(this.wrapper, 'height') |
||||
}, |
||||
methods: { |
||||
touchStart(e) { |
||||
this.$setCss(this.wrapper, 'transition-duration', `0ms`) |
||||
this.startX = e.touches[0].pageX |
||||
this.startY = e.touches[0].pageY |
||||
this.startTime = Date.now() |
||||
}, |
||||
touchMove(e) { |
||||
this.moveX = e.touches[0].pageX - this.startX |
||||
this.moveY = e.touches[0].pageY - this.startY |
||||
|
||||
let isDown = this.moveY < 0 |
||||
this.checkDirection(e) |
||||
|
||||
if (this.index === 0 && !isDown && this.next) { |
||||
bus.emit(this.name + '-moveY', this.moveY) |
||||
} |
||||
if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) return |
||||
if (this.next) { |
||||
this.$stopPropagation(e) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(0,${this.getDistance() |
||||
+ this.moveY |
||||
+ (isDown ? this.judgeValue : -this.judgeValue) |
||||
}px, 0)`) |
||||
} |
||||
}, |
||||
checkDirection(e) { |
||||
if (this.needCheck) { |
||||
// this.$stopPropagation(e) |
||||
} else { |
||||
return |
||||
} |
||||
if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) { |
||||
let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10) |
||||
this.next = angle <= 1; |
||||
// console.log(angle) |
||||
return this.needCheck = false |
||||
} |
||||
return this.needCheck = true |
||||
}, |
||||
touchEnd(e) { |
||||
let isDown = this.moveY < 0 |
||||
if (this.index === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) { |
||||
bus.emit(this.name + '-loading') |
||||
} |
||||
if ((this.index === 0 && !isDown) || (this.index === this.total - 1 && isDown)) this.next = false |
||||
|
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
if (Math.abs(this.moveY) < 20) gapTime = 1000 |
||||
if (Math.abs(this.moveY) > (this.wrapperHeight / 4)) gapTime = 100 |
||||
if (gapTime < 150 && this.next) { |
||||
if (isDown) { |
||||
this.index++ |
||||
} else { |
||||
this.index-- |
||||
} |
||||
} |
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`) |
||||
|
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(0,${this.getDistance()}px, 0)`) |
||||
this.reset() |
||||
}, |
||||
reset() { |
||||
this.moveX = 0 |
||||
this.next = false |
||||
this.startTime = null |
||||
this.needCheck = true |
||||
bus.emit(this.name + '-end', this.index) |
||||
}, |
||||
getDistance() { |
||||
return -this.index * this.wrapperHeight |
||||
}, |
||||
}, |
||||
render(createElement, context) { |
||||
return ( |
||||
<div className="slide"> |
||||
<div className="slide-wrapper" |
||||
style="flex-direction: column;" |
||||
ref="wrapper" |
||||
ontouchstart={this.touchStart.bind(this)} |
||||
ontouchmove={this.touchMove.bind(this)} |
||||
ontouchend={this.touchEnd.bind(this)} |
||||
> |
||||
{this.$slots.default()} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,307 +0,0 @@
@@ -1,307 +0,0 @@
|
||||
<script lang="jsx"> |
||||
import bus from "../../utils/bus"; |
||||
import {mapState} from "vuex"; |
||||
import * as Vue from "vue"; |
||||
import Dom from "../../utils/dom"; |
||||
|
||||
export default { |
||||
props: { |
||||
name: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
prefix: { |
||||
type: String, |
||||
default: () => '' |
||||
}, |
||||
renderSlide: { |
||||
type: Function, |
||||
default: () => { |
||||
return null |
||||
} |
||||
}, |
||||
list: { |
||||
type: Array, |
||||
default: () => { |
||||
return [] |
||||
} |
||||
}, |
||||
virtualTotal: { |
||||
type: Number, |
||||
default: () => 5 |
||||
}, |
||||
index: { |
||||
type: Number, |
||||
default: () => 0 |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
wrapper: null, |
||||
childs: 0, |
||||
lIndex: 0, |
||||
wrapperWidth: 0, |
||||
wrapperHeight: 0, |
||||
moveX: 0, |
||||
moveY: 0, |
||||
startX: 0, |
||||
startY: 0, |
||||
needCheck: true, |
||||
next: false, |
||||
startTime: null, |
||||
appInsMap: new Map() |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapState(['judgeValue', 'homeRefresh']) |
||||
}, |
||||
watch: { |
||||
lIndex(newVal, oldVal) { |
||||
new Dom(this.wrapper).find(`.v-${this.prefix}-${newVal}-video`).trigger('play') |
||||
setTimeout(() => { |
||||
new Dom(this.wrapper).find(`.v-${this.prefix}-${oldVal}-video`).trigger('stop') |
||||
}, 200) |
||||
if (newVal >= this.list.length - 3) { |
||||
this.$emit('load-more') |
||||
} |
||||
}, |
||||
list(newVal, oldVal) { |
||||
// console.log('watch', newVal.length, oldVal.length) |
||||
if (oldVal.length === 0) { |
||||
this.insertContent() |
||||
} else { |
||||
let end = oldVal.length + 3 |
||||
let top = $(this.wrapper).find(".slide-item:last").css('top') |
||||
|
||||
newVal.slice(oldVal.length, end).map((item, index) => { |
||||
let el = this.getInsEl(item, oldVal.length + index) |
||||
//这里必须要设置个top值，不然会把前面的条目给覆盖掉 |
||||
//2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值， |
||||
//因为有一条情况：当滑动最后一条和二条的时候top值不会继续加。此时新增的数据如果还 |
||||
// 计算top值的，会和前面的对不上 |
||||
$(el).css('top', top) |
||||
this.wrapper.appendChild(el) |
||||
}) |
||||
this.childs = this.wrapper.children.length |
||||
// console.log(this.childs) |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.lIndex = this.index |
||||
this.checkChildren() |
||||
this.insertContent() |
||||
}, |
||||
methods: { |
||||
refresh(list) { |
||||
$(this.wrapper).empty() |
||||
list && this.insertContent(list) |
||||
}, |
||||
dislike(item) { |
||||
let currentItem = $(this.wrapper).find(`.slide-item[data-index=${this.lIndex}]`) |
||||
let replaceItem = this.getInsEl(item, this.lIndex, true) |
||||
new Dom(replaceItem).css('top', currentItem.css('top')) |
||||
currentItem.replaceWith(replaceItem) |
||||
}, |
||||
checkChildren() { |
||||
this.wrapper = this.$refs.wrapper |
||||
this.wrapperWidth = this.$getCss(this.wrapper, 'width') |
||||
this.wrapperHeight = this.$getCss(this.wrapper, 'height') |
||||
}, |
||||
//默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新 |
||||
insertContent(list = this.list) { |
||||
let start = 0 |
||||
let that = this |
||||
|
||||
if (this.lIndex >= (this.virtualTotal - 1) / 2) { |
||||
start = this.lIndex - (this.virtualTotal - 1) / 2 |
||||
} |
||||
let end = start + 5 |
||||
if (end >= list.length) { |
||||
end = list.length |
||||
start = end - 5 |
||||
} |
||||
if (start < 0) start = 0 |
||||
// console.log('start', start) |
||||
// console.log('end', end) |
||||
list.slice(start, end).map( |
||||
(item, index) => { |
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样 |
||||
let el = this.getInsEl(item, start + index, start + index === this.lIndex) |
||||
this.wrapper.appendChild(el) |
||||
} |
||||
) |
||||
this.$setCss(this.wrapper, 'transform', `translate3d(0px, |
||||
${-this.lIndex * this.wrapperHeight}px, 0px)`) |
||||
|
||||
if (this.lIndex > 2 && list.length > 5) { |
||||
$(this.wrapper).find(".slide-item").each(function () { |
||||
if ((list.length - that.lIndex) > 2) { |
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight) |
||||
} else { |
||||
$(this).css('top', start * that.wrapperHeight) |
||||
} |
||||
}) |
||||
} |
||||
this.childs = this.wrapper.children.length |
||||
}, |
||||
getInsEl(item, index, play = false) { |
||||
// console.log('index',index,play) |
||||
let slideVNode = this.renderSlide(item, index, play, this.prefix) |
||||
const app = Vue.createApp({ |
||||
render() { |
||||
return slideVNode |
||||
} |
||||
}) |
||||
const parent = document.createElement('div') |
||||
const ins = app.mount(parent) |
||||
this.appInsMap.set(index, app) |
||||
// this.appInsMap.set(index, ins) |
||||
return ins.$el |
||||
}, |
||||
touchStart(e) { |
||||
this.$setCss(this.wrapper, 'transition-duration', `0ms`) |
||||
this.startX = e.touches[0].pageX |
||||
this.startY = e.touches[0].pageY |
||||
this.startTime = Date.now() |
||||
}, |
||||
//TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减 |
||||
touchMove(e) { |
||||
this.moveX = e.touches[0].pageX - this.startX |
||||
this.moveY = e.touches[0].pageY - this.startY |
||||
|
||||
let isDown = this.moveY < 0 |
||||
this.checkDirection(e) |
||||
|
||||
if (this.lIndex === 0 && !isDown && this.next) { |
||||
bus.emit(this.name + '-moveY', this.moveY) |
||||
} |
||||
if ((this.lIndex === 0 && !isDown) || (this.lIndex === this.list.length - 1 && isDown)) return |
||||
if (this.next) { |
||||
this.$stopPropagation(e) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(0,${this.getDistance() |
||||
+ this.moveY |
||||
+ (isDown ? this.judgeValue : -this.judgeValue) |
||||
}px, 0)`) |
||||
} |
||||
}, |
||||
checkDirection(e) { |
||||
if (this.needCheck) { |
||||
// this.$stopPropagation(e) |
||||
} else { |
||||
return |
||||
} |
||||
if (Math.abs(this.moveX) > this.judgeValue || Math.abs(this.moveY) > this.judgeValue) { |
||||
let angle = (Math.abs(this.moveX) * 10) / (Math.abs(this.moveY) * 10) |
||||
this.next = angle <= 1; |
||||
// console.log(angle) |
||||
return this.needCheck = false |
||||
} |
||||
return this.needCheck = true |
||||
}, |
||||
touchEnd(e) { |
||||
let isDown = this.moveY < 0 |
||||
if (this.lIndex === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) { |
||||
bus.emit(this.prefix + '-loading') |
||||
} |
||||
if ((this.lIndex === 0 && !isDown) || (this.lIndex === this.list.length - 1 && isDown)) this.next = false |
||||
|
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
if (Math.abs(this.moveY) < 20) gapTime = 1000 |
||||
if (Math.abs(this.moveY) > (this.wrapperHeight / 3)) gapTime = 100 |
||||
if (gapTime < 150 && this.next) { |
||||
if (isDown) { |
||||
this.lIndex++ |
||||
} else { |
||||
this.lIndex-- |
||||
} |
||||
|
||||
let that = this |
||||
if (isDown) { |
||||
let addItemIndex = this.lIndex + 2 |
||||
let res = $(that.wrapper).find(`.slide-item[data-index=${addItemIndex}]`) |
||||
if (this.childs < this.virtualTotal) { |
||||
if (res.length === 0) { |
||||
this.wrapper.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex)) |
||||
} |
||||
} |
||||
if (this.childs === this.virtualTotal |
||||
&& this.lIndex >= (this.virtualTotal + 1) / 2 |
||||
&& this.lIndex <= this.list.length - 3 |
||||
) { |
||||
if (res.length === 0) { |
||||
this.wrapper.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex)) |
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:first").data('index')).unmount() |
||||
// $(that.wrapper).find(".base-slide-item:first").remove() |
||||
$(that.wrapper).find(".slide-item").each(function () { |
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight) |
||||
}) |
||||
} |
||||
} |
||||
if (this.childs > this.virtualTotal) { |
||||
$(that.wrapper).find(".slide-item").each(function () { |
||||
let index = $(this).data('index') |
||||
if (index < (that.lIndex - 2)) { |
||||
that.appInsMap.get(index).unmount() |
||||
} |
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight) |
||||
}) |
||||
} |
||||
} else { |
||||
let addItemIndex = this.lIndex - 2 |
||||
let res = $(that.wrapper).find(`.slide-item[data-index=${addItemIndex}]`) |
||||
|
||||
if (this.lIndex > 1 && this.lIndex <= this.list.length - 4) { |
||||
if (res.length === 0) { |
||||
this.wrapper.prepend(this.getInsEl(this.list[addItemIndex], addItemIndex)) |
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:last").data('index')).unmount() |
||||
// $(that.wrapper).find(".base-slide-item:last").remove() |
||||
$(that.wrapper).find(".slide-item").each(function () { |
||||
$(this).css('top', (that.lIndex - 2) * that.wrapperHeight) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
if (this.childs > this.virtualTotal) { |
||||
this.appInsMap.get($(that.wrapper).find(".slide-item:last").data('index')).unmount() |
||||
} |
||||
} |
||||
this.childs = this.wrapper.children.length |
||||
} |
||||
this.reset() |
||||
}, |
||||
reset() { |
||||
this.$setCss(this.wrapper, 'transition-duration', `300ms`) |
||||
this.$setCss(this.wrapper, 'transform', |
||||
`translate3d(0,${this.getDistance()}px, 0)`) |
||||
|
||||
this.moveX = 0 |
||||
this.next = false |
||||
this.startTime = null |
||||
this.needCheck = true |
||||
this.$emit('update:index', this.lIndex) |
||||
bus.emit(this.name + '-end', this.lIndex) |
||||
}, |
||||
getDistance() { |
||||
return -this.lIndex * this.wrapperHeight |
||||
}, |
||||
}, |
||||
render(createElement, context) { |
||||
return ( |
||||
<div className="slide"> |
||||
<div className="slide-wrapper" |
||||
style="flex-direction: column;" |
||||
ref="wrapper" |
||||
ontouchstart={this.touchStart.bind(this)} |
||||
ontouchmove={this.touchMove.bind(this)} |
||||
ontouchend={this.touchEnd.bind(this)} |
||||
> |
||||
{this.$slots.default && this.$slots.default()} |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue