MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BaseSlide

Browse Source
This commit is contained in:
zyronon 2019-08-13 02:06:38 +08:00
parent 2f8d57d98e
commit 169510da1d
5 changed files with 357 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BaseHeader.vue
View File

@ -8,7 +8,7 @@
p-id="16293" fill="#8a8a8a"></path>
</svg>
<span class="fb c-white f20">{{title}}</span>
<slot></slot>
<slot><span></span></slot>
</div>
</template>
<script>
@ -20,10 +20,6 @@
type: String,
default: '我的名片'
},
isShowRightBtn: {
type: Boolean,
default: true
},
isShowLeftBtn: {
type: Boolean,
default: true

22
src/components/BaseSlideItem.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div id="base-slide-item" ref="slideItem">
<slot></slot>
</div>
</template>
<script>
export default {
name: "BaseSlideItem"
}
</script>
<style scoped lang="scss">
#base-slide-item {
width: 100%;
height: 100%;
/*flex: 1;*/
/*flex-shrink: 1;*/
overflow-y: scroll;
}
</style>

201
src/components/BaseSlideList.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div id="base-slide-wrapper" ref="slideWrapper">
<div id="base-slide-list" ref="slideList"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: "BaseSlideList",
created() {
// console.log('created',this.$refs)
},
data() {
return {
wrapperWidth: 0,
startLocationX: 0,
startLocationY: 0,
lastLocationX: 0,
lastLocationY: 0,
moveXDistance: 0,
moveYDistance: 0,
judgeValue: 20,
startTime: 0,
currentSlideItemIndex: 0,
isDrawRight: 0,
isCanRightWiping: false,
isCanDownWiping: false,
isNeedCheck: true,
slideList: null,
slideItems: null,
}
},
mounted() {
this.slideList = this.$refs.slideList
this.slideItems = this.slideList.children
this.wrapperWidth = this.$getCss(this.slideList, 'width')
console.log(this.wrapperWidth)
this.slideList.style.width = this.slideItems.length * this.wrapperWidth + 'px'
},
methods: {
touchStart(e) {
this.slideList.style.transition = 'none'
// indicator.style.transition = 'none'
this.startLocationX = e.touches[0].pageX
this.startLocationY = e.touches[0].pageY
// console.log(' this.startLocationX', this.startLocationX)
// console.log(' this.startLocationY', this.startLocationY)
this.startTime = Date.now()
},
touchMove(e) {
this.lastLocationX = e.touches[0].pageX
this.lastLocationY = e.touches[0].pageY
this.moveXDistance = this.lastLocationX - this.startLocationX
this.moveYDistance = this.lastLocationY - this.startLocationY
// console.log('moveXDistance', this.moveXDistance)
// console.log('moveYDistance', this.moveYDistance)
this.isDrawRight = this.moveXDistance < 0
// console.log(this.isDrawRight)
this.checkDirection()
if (this.isCanRightWiping) {
//禁止在index=0页面的时候，向左划
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
return
}
//禁止在最后页面的时候，向右划
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
return
}
e.stopImmediatePropagation()
e.stopPropagation()
if (this.isDrawRight) {
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance + this.judgeValue + 'px'
} else {
this.slideList.style.left = -this.currentSlideItemIndex * this.wrapperWidth + this.moveXDistance - this.judgeValue + 'px'
}
}
},
touchEnd(e) {
if (this.currentSlideItemIndex === 0 && !this.isDrawRight) {
return
}
//禁止在最后页面的时候，向右划
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) {
return
}
this.slideList.style.transition = 'all .3s'
let endTime = Date.now()
let gapTime = endTime - this.startTime
// 如果
if (Math.abs(this.moveXDistance) < 20) {
gapTime = 1000
}
if (Math.abs(this.moveXDistance) > (this.wrapperWidth / 3)) {
gapTime = 100
}
if (gapTime < 150) {
if (this.isDrawRight) {
this.currentSlideItemIndex += 1
} else {
this.currentSlideItemIndex -= 1
}
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
} else {
this.slideList.style.left = -(this.currentSlideItemIndex) * this.wrapperWidth + 'px'
}
this.resetConfig()
},
resetConfig() {
this.isCanDownWiping = false
this.isCanRightWiping = false
this.isNeedCheck = true
this.moveXDistance = 0
this.moveYDistance = 0
},
checkDirection() {
if (!this.isNeedCheck) {
// console.log('不需要检测了')
return
}
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
// console.log((Math.abs(this.moveXDistance) * 10))
// console.log((Math.abs(this.moveYDistance) * 10))
// console.log((Math.abs(this.moveYDistance)))
//y移动距离为0 ，angle为Infinty
if (Math.abs(this.moveYDistance) === 0) {
//左右划
this.isCanDownWiping = false
this.isCanRightWiping = true
this.isNeedCheck = false
return;
}
//X 除以 Y
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
// console.log('angle', angle);
if (angle > 0.7 && angle < 1.3) {
this.isNeedCheck = false
return
}
// console.log('x------------', moveXDistance)
// console.log('y------------', moveYDistance)
// console.log('角度------------', angle)
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
return
}
}
}
}
}
</script>
<style scoped lang="scss">
#base-slide-wrapper {
width: 100%;
overflow: hidden;
#base-slide-list {
display: flex;
left: 0;
/*transition: all 0.3s ease 0s;*/
height: 100%;
width: 100%;
position: relative;
}
}
</style>

6
src/main.js
View File

@ -16,11 +16,15 @@ import MyCard from "./pages/me/MyCard"
import BaseHeader from "./components/BaseHeader"
import MyCollect from "./pages/me/MyCollect";
import BaseSlideList from "./components/BaseSlideList";
import BaseSlideItem from "./components/BaseSlideItem";
Vue.config.productionTip = false
Vue.component('icon', Icon)
Vue.component('BaseHeader', BaseHeader)
Vue.component('BaseSlideList', BaseSlideList)
Vue.component('BaseSlideItem', BaseSlideItem)
Vue.use(VueRouter)
Vue.use(Vuex)
@ -53,7 +57,7 @@ const store = new Vuex.Store({
Vue.mixin({
methods: {
getCss(curEle, attr) {
$getCss(curEle, attr) {
let val = null, reg = null
if ("getComputedStyle" in window) {
val = window.getComputedStyle(curEle, null)[attr]

133
src/pages/me/MyCollect.vue
View File

@ -1,20 +1,143 @@
<template>
<div id="MyCollect">
<BaseHeader title="我的收藏" is-show-right-btn="false"></BaseHeader>
<BaseHeader title="我的收藏" ref="baseHeader"></BaseHeader>
<BaseSlideList :style="{height:slideListHeight+'px'}">
<BaseSlideItem>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
<p>12</p>
</BaseSlideItem>
<BaseSlideItem>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</BaseSlideItem>
<BaseSlideItem>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
<p>3</p>
</BaseSlideItem>
<BaseSlideItem>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
<p>4</p>
</BaseSlideItem>
</BaseSlideList>
</div>
</template>
<script>
export default {
name: "MyCollect",
date() {
return {}
data() {
return {
slideListHeight: 812
}
},
created(){
// console.log(this.slideListHeight)
},
mounted() {
let screenHeight = document.body.clientHeight
let baseHeader = this.$refs.baseHeader
this.slideListHeight = screenHeight - baseHeader.$el.clientHeight
}
}
</script>
<style scoped>
<style scoped lang="scss">
#MyCollect {
width: 100vw;
height: 100%;