验证滑动视频闪屏问题
This commit is contained in:
zyronon
parent
75b8d4b653
commit
3928d583ff
@ -1,17 +1,21 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
<script crossorigin="anonymous"
|
||||||
<body>
|
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
|
||||||
<noscript>
|
src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
</head>
|
||||||
</noscript>
|
<body>
|
||||||
<div id="app"></div>
|
<noscript>
|
||||||
<!-- built files will be auto injected -->
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
</body>
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -8,6 +8,12 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
|
.base-slide-item {
|
||||||
|
min-width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -1,43 +1,47 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="home-index">
|
<div id="home-index">
|
||||||
<SlideList direction="column"
|
<SlideListVirtual direction="column"
|
||||||
ref="slideList"
|
ref="slideList"
|
||||||
@end="end"
|
:virtual="true"
|
||||||
@first="first"
|
:list="videos"
|
||||||
:virtual="true"
|
:render="render"
|
||||||
:total="total"
|
|
||||||
@slide="slide"
|
|
||||||
>
|
>
|
||||||
<SlideItem v-for="item in videos" :style="itemTop">
|
</SlideListVirtual>
|
||||||
<video :src="item.videoUrl" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
|
|
||||||
<p> 您的浏览器不支持 video 标签。</p>
|
|
||||||
</video>
|
|
||||||
</SlideItem>
|
|
||||||
</SlideList>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Comment from '../../components/Comment.vue'
|
import SlideListVirtual from './SlideListVirtual'
|
||||||
import Other from '../../components/Other.vue'
|
|
||||||
import Share from '../../components/Share.vue'
|
|
||||||
import Footer from "../../components/Footer.vue"
|
|
||||||
import mp1 from '../../assets/video/1.mp4'
|
|
||||||
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
||||||
import Video from "../../components/Video.vue";
|
import Video from "../../components/Video.vue";
|
||||||
import mp41 from "../../assets/video/5.mp4";
|
import mp40 from "../../assets/video/0.mp4";
|
||||||
|
import mp41 from "../../assets/video/1.mp4";
|
||||||
import mp42 from "../../assets/video/2.mp4";
|
import mp42 from "../../assets/video/2.mp4";
|
||||||
import mp43 from "../../assets/video/3.mp4";
|
import mp43 from "../../assets/video/3.mp4";
|
||||||
import mp44 from "../../assets/video/4.mp4";
|
import mp44 from "../../assets/video/4.mp4";
|
||||||
import mp45 from "../../assets/video/5.mp4";
|
import mp45 from "../../assets/video/5.mp4";
|
||||||
|
import mp46 from "../../assets/video/6.mp4";
|
||||||
|
import mp47 from "../../assets/video/7.mp4";
|
||||||
|
import mp48 from "../../assets/video/8.mp4";
|
||||||
|
import mp49 from "../../assets/video/9.mp4";
|
||||||
|
import mp410 from "../../assets/video/10.mp4";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "HomeIndex",
|
name: "HomeIndex",
|
||||||
components: {Footer, Comment, Share, Other, Video},
|
components: {SlideListVirtual, Video},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [1, 2, 3, 4, 5],
|
|
||||||
videos: [
|
videos: [
|
||||||
|
{
|
||||||
|
videoUrl: mp40,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: true,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
{
|
{
|
||||||
videoUrl: mp41,
|
videoUrl: mp41,
|
||||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
@ -88,95 +92,74 @@ export default {
|
|||||||
shared: 999,
|
shared: 999,
|
||||||
duration: 99
|
duration: 99
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
videoUrl: mp46,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: false,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
videoUrl: mp47,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: false,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
videoUrl: mp48,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: false,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
videoUrl: mp49,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: false,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
|
{
|
||||||
|
videoUrl: mp410,
|
||||||
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
||||||
|
videoPoster: src1Bg,
|
||||||
|
isLoved: false,
|
||||||
|
loves: 1234,
|
||||||
|
comments: 666,
|
||||||
|
shared: 999,
|
||||||
|
duration: 99
|
||||||
|
},
|
||||||
],
|
],
|
||||||
addCount: 0,
|
render: item => {
|
||||||
total: 10,
|
return (
|
||||||
isCommenting: false,
|
`
|
||||||
isSharing: false,
|
<div class="base-slide-item">
|
||||||
baseActiveIndex: 0,
|
<video src="${item.videoUrl}" ref="video" muted autoplay loop style="width: 100vw;height: 100vh;">
|
||||||
activeIndex: 2,
|
<p> 您的浏览器不支持 video 标签。</p>
|
||||||
tabWidth: 30,
|
</video>
|
||||||
tabIndexRelationActiveIndexLefts: [],
|
</div>
|
||||||
slideMoveXDistance: 0,
|
`
|
||||||
slideMoveYDistance: 0,
|
)
|
||||||
height: 0,
|
}
|
||||||
width: 0,
|
|
||||||
toolbarStyleTransitionDuration: 0,
|
|
||||||
loading: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
itemTop() {
|
|
||||||
return {top: this.addCount * 812 + 'px'}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.height = document.body.clientHeight
|
this.height = document.body.clientHeight
|
||||||
this.width = document.body.clientWidth
|
this.width = document.body.clientWidth
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
end() {
|
|
||||||
if (this.slideMoveYDistance > 60) {
|
|
||||||
this.getData()
|
|
||||||
}
|
|
||||||
this.slideMoveYDistance = 0;
|
|
||||||
this.toolbarStyleTransitionDuration = 300
|
|
||||||
},
|
|
||||||
first(e) {
|
|
||||||
if (this.loading) return
|
|
||||||
},
|
|
||||||
getData() {
|
|
||||||
this.loading = true
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loading = false
|
|
||||||
}, 100)
|
|
||||||
},
|
|
||||||
slide(e) {
|
|
||||||
let {currentSlideItemIndex, isDrawDown} = e
|
|
||||||
if (isDrawDown) {
|
|
||||||
if (this.videos.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
|
|
||||||
// this.list.push(currentSlideItemIndex + 3)
|
|
||||||
console.log('push')
|
|
||||||
this.videos.push({
|
|
||||||
videoUrl: require(`../../assets/video/${currentSlideItemIndex + 3}.mp4`),
|
|
||||||
videoPoster: src1Bg,
|
|
||||||
isLoved: true,
|
|
||||||
loves: 1234,
|
|
||||||
comments: 666,
|
|
||||||
shared: 999,
|
|
||||||
duration: 99
|
|
||||||
},)
|
|
||||||
// this.addCount += 1
|
|
||||||
// this.videos.shift()
|
|
||||||
setTimeout(() => {
|
|
||||||
// this.addCount += 1
|
|
||||||
// this.videos.shift()
|
|
||||||
}, 300)
|
|
||||||
this.$refs.slideList.checkChildren()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
|
|
||||||
// this.videos.pop()
|
|
||||||
setTimeout(() => {
|
|
||||||
// this.addCount -= 1
|
|
||||||
this.videos.unshift({
|
|
||||||
videoUrl: require(`../../assets/video/${currentSlideItemIndex - 1}.mp4`),
|
|
||||||
videoPoster: src1Bg,
|
|
||||||
isLoved: true,
|
|
||||||
loves: 1234,
|
|
||||||
comments: 666,
|
|
||||||
shared: 999,
|
|
||||||
duration: 99
|
|
||||||
},)
|
|
||||||
}, 300)
|
|
||||||
this.$refs.slideList.checkChildren()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
531
src/pages/home/SlideListVirtual.vue
Normal file
531
src/pages/home/SlideListVirtual.vue
Normal file
@ -0,0 +1,531 @@
|
|||||||
|
<template>
|
||||||
|
<div id="base-slide-wrapper" ref="slideWrapper">
|
||||||
|
<div class="indicator-home" v-if="showIndicator && indicatorType === 'home'">
|
||||||
|
<div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
|
||||||
|
<div class="toolbar" ref="toolbar" :style="toolbarStyle">
|
||||||
|
<div class="left">直播</div>
|
||||||
|
<div class="tab-ctn">
|
||||||
|
<div class="tabs" ref="tabs">
|
||||||
|
<div class="tab"
|
||||||
|
:class="currentSlideItemIndex === 0?'active':''"
|
||||||
|
@click="changeIndex(false,0)">
|
||||||
|
<span>关注</span></div>
|
||||||
|
<div class="tab"
|
||||||
|
:class="currentSlideItemIndex === 1?'active':''"
|
||||||
|
@click="changeIndex(false,1)"><span>推荐</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="indicator" ref="indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
|
||||||
|
</div>
|
||||||
|
<div class="loading" :style="loadingStyle">AA</div>
|
||||||
|
</div>
|
||||||
|
<div class="indicator-me" :class="indicatorFixed?'fixed':''" v-if="showIndicator && indicatorType === 'me'">
|
||||||
|
<div class="tabs" ref="tabs">
|
||||||
|
<div class="tab"
|
||||||
|
:class="currentSlideItemIndex === 0?'active':''"
|
||||||
|
@click="changeIndex(false,0)">
|
||||||
|
<span>作品</span></div>
|
||||||
|
<div class="tab"
|
||||||
|
:class="currentSlideItemIndex === 1?'active':''"
|
||||||
|
@click.stop="changeIndex(false,1)">
|
||||||
|
<span>私密</span>
|
||||||
|
</div>
|
||||||
|
<div class="tab"
|
||||||
|
:class="currentSlideItemIndex === 2?'active':''"
|
||||||
|
@click="changeIndex(false,2,$event)">
|
||||||
|
<span>喜欢</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="indicator" ref="indicator"></div>
|
||||||
|
</div>
|
||||||
|
<div id="base-slide-list" ref="slideList"
|
||||||
|
:style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
|
||||||
|
@touchstart="touchStart($event)"
|
||||||
|
@touchmove="touchMove($event)"
|
||||||
|
@touchend="touchEnd($event)">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "BaseSlideList",
|
||||||
|
props: {
|
||||||
|
render: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
canMove: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true
|
||||||
|
},
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'row'
|
||||||
|
},
|
||||||
|
showIndicator: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
indicatorFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
indicatorType: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'home'
|
||||||
|
},
|
||||||
|
useHomeLoading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
virtual: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 20
|
||||||
|
},
|
||||||
|
activeIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 0
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
toolbarStyle() {
|
||||||
|
if (!this.useHomeLoading) return
|
||||||
|
return {
|
||||||
|
opacity: 1 - this.homeLoadingMoveYDistance / 20,
|
||||||
|
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||||
|
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
noticeStyle() {
|
||||||
|
if (!this.useHomeLoading) return
|
||||||
|
return {
|
||||||
|
opacity: this.homeLoadingMoveYDistance / 60,
|
||||||
|
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||||
|
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadingStyle() {
|
||||||
|
if (!this.useHomeLoading) return
|
||||||
|
if (this.loading) {
|
||||||
|
return {
|
||||||
|
opacity: 1,
|
||||||
|
'transition-duration': '300ms',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.homeLoadingMoveYDistance !== 0) {
|
||||||
|
return {
|
||||||
|
opacity: this.homeLoadingMoveYDistance / 60,
|
||||||
|
'transition-duration': this.toolbarStyleTransitionDuration + 'ms',
|
||||||
|
transform: `translate3d(0, ${this.homeLoadingMoveYDistance > 60 ? 60 : this.homeLoadingMoveYDistance}px, 0)`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
wrapperWidth: 0,
|
||||||
|
wrapperHeight: 0,
|
||||||
|
|
||||||
|
startLocationX: 0,
|
||||||
|
startLocationY: 0,
|
||||||
|
|
||||||
|
moveXDistance: 0,
|
||||||
|
moveYDistance: 0,
|
||||||
|
|
||||||
|
judgeValue: 10,
|
||||||
|
startTime: 0,
|
||||||
|
|
||||||
|
currentSlideItemIndex: 0,
|
||||||
|
isDrawRight: true,
|
||||||
|
isDrawDown: true,
|
||||||
|
isCanRightWiping: false,
|
||||||
|
isCanDownWiping: false,
|
||||||
|
isNeedCheck: true,
|
||||||
|
|
||||||
|
slideList: null,
|
||||||
|
slideItems: null,
|
||||||
|
indicatorRef: null,
|
||||||
|
slideItemsWidths: [],
|
||||||
|
slideItemsHeights: [],
|
||||||
|
tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left,
|
||||||
|
indicatorSpace: 0,//indicator之间的间距
|
||||||
|
toolbarStyleTransitionDuration: 0,
|
||||||
|
homeLoadingMoveYDistance: 0,//homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||||
|
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
activeIndex() {
|
||||||
|
// console.log('activeIndex')
|
||||||
|
this.changeIndex()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted: async function () {
|
||||||
|
await this.checkChildren(true)
|
||||||
|
if (this.virtual && this.render) {
|
||||||
|
this.list.slice(0, 2).map(v => {
|
||||||
|
this.slideList.innerHTML += this.render(v)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
await this.checkChildren(true)
|
||||||
|
this.showIndicator && this.initTabs()
|
||||||
|
this.changeIndex(true)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeIndex(init = false, index = null, e) {
|
||||||
|
this.currentSlideItemIndex = index !== null ? index : this.activeIndex
|
||||||
|
!init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||||
|
if (this.direction === 'row') {
|
||||||
|
this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
|
||||||
|
if (this.showIndicator) {
|
||||||
|
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
|
||||||
|
}
|
||||||
|
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||||
|
|
||||||
|
},
|
||||||
|
initTabs() {
|
||||||
|
let tabs = this.$refs.tabs
|
||||||
|
this.indicatorRef = this.$refs.indicator
|
||||||
|
for (let i = 0; i < tabs.children.length; i++) {
|
||||||
|
let item = tabs.children[i]
|
||||||
|
this.tabWidth = this.$getCss(item, 'width')
|
||||||
|
this.tabIndicatorRelationActiveIndexLefts.push(
|
||||||
|
item.getBoundingClientRect().x - tabs.children[0].getBoundingClientRect().x + (this.indicatorType === 'home' ? this.tabWidth * 0.15 : 0))
|
||||||
|
}
|
||||||
|
this.indicatorSpace = this.tabIndicatorRelationActiveIndexLefts[1] - this.tabIndicatorRelationActiveIndexLefts[0]
|
||||||
|
if (this.showIndicator) {
|
||||||
|
this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||||
|
this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkChildren(init) {
|
||||||
|
this.slideList = this.$refs.slideList
|
||||||
|
this.slideItems = this.slideList.children
|
||||||
|
this.wrapperWidth = this.$getCss(this.slideList, 'width')
|
||||||
|
this.wrapperHeight = this.$getCss(this.slideList, 'height')
|
||||||
|
|
||||||
|
for (let i = 0; i < this.slideItems.length; i++) {
|
||||||
|
let el = this.slideItems[i]
|
||||||
|
this.slideItemsWidths.push(this.$getCss(el, 'width'))
|
||||||
|
this.slideItemsHeights.push(this.$getCss(el, 'height'))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchStart(e) {
|
||||||
|
this.$setCss(this.slideList, 'transition-duration', `0ms`)
|
||||||
|
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||||
|
this.toolbarStyleTransitionDuration = 0
|
||||||
|
|
||||||
|
this.startLocationX = e.touches[0].pageX
|
||||||
|
this.startLocationY = e.touches[0].pageY
|
||||||
|
this.startTime = Date.now()
|
||||||
|
},
|
||||||
|
touchMove(e) {
|
||||||
|
if (!this.canMove) return;
|
||||||
|
this.moveXDistance = e.touches[0].pageX - this.startLocationX
|
||||||
|
this.moveYDistance = e.touches[0].pageY - this.startLocationY
|
||||||
|
|
||||||
|
this.isDrawDown = this.moveYDistance < 0
|
||||||
|
|
||||||
|
this.checkDirection()
|
||||||
|
|
||||||
|
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
|
||||||
|
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
|
||||||
|
if (this.useHomeLoading && this.isCanDownWiping && !this.loading) {
|
||||||
|
this.homeLoadingMoveYDistance = this.moveYDistance
|
||||||
|
}
|
||||||
|
|
||||||
|
//me页面，需要获取向下滑动的时候
|
||||||
|
if (!this.isDrawDown) {
|
||||||
|
this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
|
||||||
|
}
|
||||||
|
|
||||||
|
//todo 太卡了，后面考虑用原生js来写
|
||||||
|
// this.$attrs['onMove'] && this.$emit('move', {
|
||||||
|
// x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
|
||||||
|
// y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
|
||||||
|
// })
|
||||||
|
|
||||||
|
if (this.isCanDownWiping) {
|
||||||
|
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
|
||||||
|
|
||||||
|
if (this.virtual) {
|
||||||
|
if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return
|
||||||
|
} else {
|
||||||
|
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
|
||||||
|
}
|
||||||
|
// console.log('this.isCanDownWiping')
|
||||||
|
this.$stopPropagation(e)
|
||||||
|
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
touchEnd(e) {
|
||||||
|
this.$attrs['onEnd'] && this.$emit('end')
|
||||||
|
if (this.useHomeLoading) {
|
||||||
|
if (this.homeLoadingMoveYDistance > 60) {
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
this.toolbarStyleTransitionDuration = 300
|
||||||
|
this.homeLoadingMoveYDistance = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.isCanDownWiping) {
|
||||||
|
this.$setCss(this.slideList, 'transition-duration', `300ms`)
|
||||||
|
this.showIndicator && this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
|
||||||
|
let endTime = Date.now()
|
||||||
|
let gapTime = endTime - this.startTime
|
||||||
|
|
||||||
|
if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return
|
||||||
|
//禁止在最后页面的时候，向右划
|
||||||
|
|
||||||
|
if (this.virtual) {
|
||||||
|
if (this.currentSlideItemIndex === this.list.length - 1 && this.isDrawDown) return
|
||||||
|
} else {
|
||||||
|
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawDown) return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$stopPropagation(e)
|
||||||
|
if (Math.abs(this.moveYDistance) < 20) gapTime = 1000
|
||||||
|
if (Math.abs(this.moveYDistance) > (this.wrapperHeight / 3)) gapTime = 100
|
||||||
|
if (gapTime < 150) {
|
||||||
|
if (this.isDrawDown) {
|
||||||
|
this.currentSlideItemIndex += 1
|
||||||
|
} else {
|
||||||
|
this.currentSlideItemIndex -= 1
|
||||||
|
}
|
||||||
|
console.log(this.slideItems)
|
||||||
|
let that = this
|
||||||
|
if (this.virtual) {
|
||||||
|
if (this.slideItems.length > 2) {
|
||||||
|
if (this.isDrawDown) {
|
||||||
|
$("#base-slide-list div:first").remove()
|
||||||
|
$(".base-slide-item").each(function () {
|
||||||
|
$(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
|
||||||
|
})
|
||||||
|
let item = this.list[this.currentSlideItemIndex + 1]
|
||||||
|
let s = $($(this.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||||
|
this.slideList.appendChild(s[0])
|
||||||
|
} else {
|
||||||
|
$("#base-slide-list div:last").remove()
|
||||||
|
$(".base-slide-item").each(function () {
|
||||||
|
$(this).css('top', (that.currentSlideItemIndex - 1) * that.wrapperHeight)
|
||||||
|
})
|
||||||
|
let item = this.list[this.currentSlideItemIndex - 1]
|
||||||
|
let s = $($(this.render(item))[0]).css('top', (this.currentSlideItemIndex - 1) * this.wrapperHeight)
|
||||||
|
$('#base-slide-list').prepend(s)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let item = this.list[this.currentSlideItemIndex + 1]
|
||||||
|
this.slideList.appendChild($(this.render(item))[0])
|
||||||
|
}
|
||||||
|
this.checkChildren()
|
||||||
|
}
|
||||||
|
this.$emit('slide', {
|
||||||
|
currentSlideItemIndex: this.currentSlideItemIndex,
|
||||||
|
isDrawDown: this.isDrawDown,
|
||||||
|
isDrawRight: this.isDrawRight
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex)}px, 0px)`)
|
||||||
|
}
|
||||||
|
this.resetConfig()
|
||||||
|
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
this.loading = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
}, 1500)
|
||||||
|
},
|
||||||
|
resetConfig() {
|
||||||
|
this.isCanDownWiping = false
|
||||||
|
this.isCanRightWiping = false
|
||||||
|
this.isNeedCheck = true
|
||||||
|
this.moveXDistance = 0
|
||||||
|
this.moveYDistance = 0
|
||||||
|
},
|
||||||
|
getHeight(index) {
|
||||||
|
return this.slideItemsHeights.reduce((p, c, i) => {
|
||||||
|
if (i < index) {
|
||||||
|
//最后一页，如果宽度不够屏幕宽度，那不能拉完
|
||||||
|
if (this.slideItemsHeights.length - 1 === i + 1) {
|
||||||
|
p = p + c - (this.wrapperHeight - this.slideItemsHeights[index])
|
||||||
|
} else {
|
||||||
|
p += c
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return p
|
||||||
|
}, 0)
|
||||||
|
},
|
||||||
|
checkDirection() {
|
||||||
|
if (!this.isNeedCheck) return
|
||||||
|
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
|
||||||
|
if (angle < 0.6) {
|
||||||
|
//上下划
|
||||||
|
this.isCanDownWiping = true
|
||||||
|
this.isCanRightWiping = false
|
||||||
|
this.isNeedCheck = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (angle > 5) {
|
||||||
|
//左右划
|
||||||
|
this.isCanDownWiping = false
|
||||||
|
this.isCanRightWiping = true
|
||||||
|
this.isNeedCheck = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "../../assets/scss/index";
|
||||||
|
|
||||||
|
#base-slide-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
|
#base-slide-list {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-home {
|
||||||
|
position: fixed;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 60px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
opacity: 0;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
opacity: 0;
|
||||||
|
top: 20px;
|
||||||
|
right: 15px;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tab-ctn {
|
||||||
|
width: 30%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
transition: color .3s;
|
||||||
|
color: gray;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
//transition: left .3s;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
height: 3px;
|
||||||
|
width: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-me {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background: $main-bg;
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
height: 40px;
|
||||||
|
width: 33%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: gray;
|
||||||
|
transition: color .3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
height: 2px;
|
||||||
|
background: gold;
|
||||||
|
width: 33%;
|
||||||
|
position: relative;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-me.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Title</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<style>
|
|
||||||
.test {
|
|
||||||
width: 400px;
|
|
||||||
height: 600px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
img{
|
|
||||||
display: block;
|
|
||||||
width: 400px;
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="test">
|
|
||||||
<img class="poster" src="./assets/img/poster/1.jpg"/>
|
|
||||||
<div>
|
|
||||||
123
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
121
src/test2.html
121
src/test2.html
@ -1,121 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Title</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<style>
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-wrapper{
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-slide{
|
|
||||||
min-width: 100vw;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="swiper-container">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
<p> Slide 1</p>
|
|
||||||
<p> Slide 2</p>
|
|
||||||
<p> Slide 3</p>
|
|
||||||
<p> Slide 4</p>
|
|
||||||
<p> Slide 5</p>
|
|
||||||
<p> Slide 6</p>
|
|
||||||
<p> Slide 7</p>
|
|
||||||
<p> Slide 8</p>
|
|
||||||
<p> Slide 9</p>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
|
|
||||||
<p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
|
|
||||||
<p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
|
|
||||||
<p>Slide 2Slide 2Slide 2Slide 2Slide 2</p>
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">Slide 3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user