直播
@@ -38,7 +38,7 @@ import Loading from "../Loading";
export default {
name: "BaseSlideList",
- components:{
+ components: {
Loading
},
props: {
@@ -54,10 +54,6 @@ export default {
type: Boolean,
default: () => false
},
- indicatorType: {
- type: String,
- default: () => 'home'
- },
useHomeLoading: {
type: Boolean,
default: () => false
@@ -193,7 +189,6 @@ export default {
},
touchMove(e) {
// this.$stopPropagation(e)
-
if (!this.canMove) return;
this.moveXDistance = e.touches[0].pageX - this.startLocationX
this.moveYDistance = e.touches[0].pageY - this.startLocationY
@@ -203,15 +198,6 @@ export default {
this.checkDirection()
- //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},
- // })
//多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
//slideitem同时在左右移的情况，所以不能直接使用moveYDistance
@@ -225,14 +211,16 @@ export default {
//禁止在最后页面的时候，向右划
if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return
- bus.emit(this.name + 'move', {
+ bus.emit(this.name + '-moved', {
x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
})
this.$stopPropagation(e)
- this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) +
- this.moveXDistance +
- (this.isDrawRight ? this.judgeValue : -this.judgeValue)}px, 0px, 0px)`)
+ this.$setCss(this.slideList, 'transform',
+ `translate3d(${-this.getWidth(this.currentSlideItemIndex) +
+ this.moveXDistance +
+ (this.isDrawRight ? this.judgeValue : -this.judgeValue)}px, 0px, 0px)`)
+
this.showIndicator && this.$setCss(this.indicatorRef, 'left',
this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] -
this.moveXDistance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
@@ -279,7 +267,7 @@ export default {
this.resetConfig()
this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
this.$attrs['onEnd'] && this.$emit('end')
- bus.emit(this.name + 'end', this.currentSlideItemIndex)
+ bus.emit(this.name + '-end', this.currentSlideItemIndex)
},
resetConfig() {
this.isCanRightWiping = false
@@ -308,20 +296,21 @@ export default {
},
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
+ if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) {
+ let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10)
+ if (angle > 1) {
+ this.isCanDownWiping = false
+ this.isCanRightWiping = true
+ // console.log('横划')
+ } else {
+ this.isCanDownWiping = true
+ this.isCanRightWiping = false
+ // console.log('竖划')
+ }
+ // console.log(angle)
+ return this.isNeedCheck = false
}
+ return this.isNeedCheck = true
}
}
}
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index c096afa..d2474c8 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -1,163 +1,85 @@
-
-
-
-
-
-
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
- 111111111111
-
-
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
- 222222222222
-
-
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
- 3333333333333
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
+ 111111111111
-
-
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
详情页
-
222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
+ 222222222222
-
-
-
+
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+ 3333333333333
+
+
+
@@ -166,139 +88,30 @@ import Comment from '../../components/Comment.vue'
import Other from '../../components/Other.vue'
import Share from '../../components/Share.vue'
import Footer from "../../components/Footer.vue"
-import mp41 from '../../assets/video/5.mp4'
-import mp42 from '../../assets/video/2.mp4'
-import mp43 from '../../assets/video/3.mp4'
-import mp44 from '../../assets/video/4.mp4'
-import mp45 from '../../assets/video/5.mp4'
-import src1Bg from '../../assets/img/poster/src1-bg.png'
-import Video from "../../components/Video.vue";
-import SlideColumnList from "../../components/slide/SlideColumnList";
export default {
name: "HomeIndex",
- components: {Footer, Comment, Share, Other, Video, SlideColumnList},
+ components: {Footer, Comment, Share, Other},
data() {
return {
- list: [1, 2, 3, 4, 5],
- videos: [
- {
- videoUrl: mp41,
- // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
- videoPoster: src1Bg,
- isLoved: true,
- loves: 1234,
- comments: 666,
- shared: 999,
- duration: 99
- },
- {
- videoUrl: mp42,
- // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
- videoPoster: src1Bg,
- isLoved: false,
- loves: 1234,
- comments: 666,
- shared: 999,
- duration: 99
- },
- {
- videoUrl: mp43,
- // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
- videoPoster: src1Bg,
- isLoved: false,
- loves: 1234,
- comments: 666,
- shared: 999,
- duration: 99
- },
- {
- videoUrl: mp44,
- // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
- videoPoster: src1Bg,
- isLoved: false,
- loves: 1234,
- comments: 666,
- shared: 999,
- duration: 99
- },
- {
- videoUrl: mp45,
- // videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
- videoPoster: src1Bg,
- isLoved: false,
- loves: 1234,
- comments: 666,
- shared: 999,
- duration: 99
- },
- ],
- addCount: 0,
- total: 10,
- isCommenting: false,
- isSharing: false,
- baseActiveIndex: 0,
- activeIndex: 1,
- videoActiveIndex: 0,
-
- tabWidth: 30,
- tabIndexRelationActiveIndexLefts: [],
- slideMoveXDistance: 0,
- slideMoveYDistance: 0,
height: 0,
width: 0,
- toolbarStyleTransitionDuration: 0,
- loading: false
}
},
- computed: {
- itemTop() {
- return {top: this.addCount * 812 + 'px'}
- },
- },
mounted() {
- this.height = document.body.clientHeight
- this.width = document.body.clientWidth
- },
- methods: {
- getData() {
- this.loading = true
- setTimeout(() => {
- this.loading = false
- }, 1500)
- },
- slide(e) {
- let {currentSlideItemIndex, isDrawDown} = e
- if (isDrawDown) {
- if (this.list.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
- this.list.push(currentSlideItemIndex + 3)
- setTimeout(() => {
- this.addCount += 1
- this.list.shift()
- }, 300)
- this.$refs.slideList.checkChildren()
- }
- } else {
- if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
- this.list.pop()
- setTimeout(() => {
- this.addCount -= 1
- this.list.unshift(currentSlideItemIndex - 1)
- }, 300)
- this.$refs.slideList.checkChildren()
- }
- }
- },
+ // this.height = document.body.clientHeight
+ // this.width = document.body.clientWidth
},
+ methods: {},
created() {
},
+
}
\ No newline at end of file
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 6951389..77f55eb 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -1,6 +1,8 @@
-
- 
- 
-
- 
- 
- {{ item.shared }}
- 
-
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
- 
-
- 
- 
- 
-