优化首页视频播放逻辑

2021-07-09 00:06:01 +08:00 · 2021-07-09 00:06:01 +08:00 · 39d74245a8
commit 39d74245a8
parent 7448c01594
6 changed files with 36 additions and 48 deletions
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="footer f16 ">
+  <div class="footer f16 " @touchmove.stop="false">
    <div class="button" @click="refresh()">
      <span v-if="!isRefresh" :class="{active:currentTab===1}">首页</span>
      <img v-else src="../assets/img/icon/refresh.png" alt="" class="refresh">
--- a/src/components/slide/SlideColumnList.vue
+++ b/src/components/slide/SlideColumnList.vue
@ -162,7 +162,10 @@ export default {
        }
        // console.log('this.isCanDownWiping')
        this.$stopPropagation(e)
-        this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) + this.moveYDistance}px, 0px)`)
+        this.$setCss(this.slideList, 'transform', `translate3d(0px, ${-this.getHeight(this.currentSlideItemIndex) +
+        this.moveYDistance +
+        (this.isDrawDown ? this.judgeValue : -this.judgeValue)
+        }px, 0px)`)
      }
    },
    touchEnd(e) {
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@ -40,7 +40,7 @@
      <div class="indicator" ref="indicator"></div>
    </div>
    <div id="base-slide-list" ref="slideList"
-         :style="{'flex-direction':direction,marginTop:indicatorFixed?'42px':'0'}"
+         :style="{'flex-direction':'row',marginTop:indicatorFixed?'42px':'0'}"
         @touchstart="touchStart($event)"
         @touchmove="touchMove($event)"
         @touchend="touchEnd($event)">
@ -59,10 +59,6 @@ export default {
      type: Boolean,
      default: () => true
    },
-    direction: {
-      type: String,
-      default: () => 'row'
-    },
    showIndicator: {
      type: Boolean,
      default: () => false
@ -79,14 +75,6 @@ export default {
      type: Boolean,
      default: () => false
    },
-    virtual: {
-      type: Boolean,
-      default: () => false
-    },
-    total: {
-      type: Number,
-      default: () => 20
-    },
    activeIndex: {
      type: Number,
      default: () => 0
@ -130,7 +118,6 @@ export default {
    return {
      loading: false,
      wrapperWidth: 0,
-      wrapperHeight: 0,

      startLocationX: 0,
      startLocationY: 0,
@ -152,7 +139,6 @@ export default {
      slideItems: null,
      indicatorRef: null,
      slideItemsWidths: [],
-      slideItemsHeights: [],
      tabIndicatorRelationActiveIndexLefts: [],//指标和slideItem的index的对应left,
      indicatorSpace: 0,//indicator之间的间距
      toolbarStyleTransitionDuration: 0,
@ -162,7 +148,6 @@ export default {
  },
  watch: {
    activeIndex() {
-      // console.log('activeIndex')
      this.changeIndex()
    },
  },
@ -180,7 +165,6 @@ export default {
        this.$setCss(this.indicatorRef, 'left', this.tabIndicatorRelationActiveIndexLefts[this.currentSlideItemIndex] + 'px')
      }
      this.$attrs['onUpdate:active-index'] && this.$emit('update:active-index', this.currentSlideItemIndex)
-
    },
    initTabs() {
      let tabs = this.$refs.tabs
@ -198,16 +182,14 @@ export default {
      }
    },
    async checkChildren(init) {
-      await nextTick(() => {
-        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.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'))
+      }
    },
    touchStart(e) {
      this.$setCss(this.slideList, 'transition-duration', `0ms`)
@ -228,7 +210,6 @@ export default {

      this.checkDirection()

-
      //me页面，需要获取向下滑动的时候
      if (!this.isDrawDown) {
        this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
@ -240,6 +221,12 @@ export default {
      //   y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
      // })

+      //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
+      //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
+      if (this.isCanDownWiping && this.useHomeLoading && !this.loading) {
+        this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
+      }
+
      if (this.isCanRightWiping) {
        // //禁止在index=0页面的时候，向左划
        if (this.currentSlideItemIndex === 0 && !this.isDrawRight) return
@ -247,17 +234,12 @@ export default {
        if (this.currentSlideItemIndex === this.slideItems.length - 1 && this.isDrawRight) return

        this.$stopPropagation(e)
-        this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}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')
-      } else {
-
-        //多重判断，this.isCanDownWiping 这个判断是为了，只能在一个方向上，进行页面更新，比如说，我斜着画，就会出现toolbar又在下移，
-        //slideitem同时在左右移的情况，所以不能直接使用moveYDistance
-        if (this.useHomeLoading && !this.loading) {
-          this.homeLoadingMoveYDistance = this.moveYDistance > 0 ? this.moveYDistance : 0
-        }
      }
    },
    getData() {
@ -332,12 +314,14 @@ export default {
      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
      }
--- a/src/main.js
+++ b/src/main.js
@ -14,6 +14,8 @@ import Footer from "./components/Footer";
 import router from "./router";
 import store from "./store";
 import globalMethods from './utils/global-methods'
+import SlideRowList from "./components/slide/SlideRowList";
+import SlideColumnList from "./components/slide/SlideColumnList";

 const mixin = {
  methods: {
@ -25,6 +27,8 @@ app.provide('mitt', mitt())

 app.component('BaseHeader', BaseHeader)
 app.component('SlideList', SlideList)
+app.component('SlideRowList', SlideRowList)
+app.component('SlideColumnList', SlideColumnList)
 app.component('SlideItem', SlideItem)
 app.component('Video1', Video)
 app.component('Footer', Footer)
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@ -404,7 +404,7 @@ export default {
      isSharing: false,
      videoActiveIndex: 0,
      baseActiveIndex: 0,
-      activeIndex: 0,
+      activeIndex: 1,
      render: (item, itemIndex) => {
        return (
            <div className="base-slide-item video-slide-item" data-index={itemIndex}>
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@ -1,6 +1,6 @@
 <template>
  <div class="Me">
-    <SlideList style="width: 100vw;"
+    <SlideRowList style="width: 100vw;"
               @first="first"
               @end="end"
               v-model:active-index="baseActiveIndex"
@ -58,7 +58,7 @@
          </div>
        </div>
        <div ref="content" style="margin-bottom: 60px;">
-          <SlideList
+          <SlideRowList
              :show-indicator="true"
              :indicator-fixed="indicatorFixed"
              indicator-type="me"
@ -66,10 +66,8 @@
              v-model:active-index="contentIndex">
            <SlideItem>
              <div ref="tab-content1">
-                <div class="posters">
-                  <Posters></Posters>
-                  <div class="no-more">暂时没有更多了</div>
-                </div>
+                <Posters></Posters>
+                <div class="no-more">暂时没有更多了</div>
              </div>
            </SlideItem>
            <SlideItem>
@ -84,7 +82,7 @@
                <div class="no-more">暂时没有更多了</div>
              </div>
            </SlideItem>
-          </SlideList>
+          </SlideRowList>
        </div>
        <Footer v-bind:init-tab="5"/>
      </SlideItem>
@ -194,7 +192,7 @@
          </div>
        </div>
      </SlideItem>
-    </SlideList>
+    </SlideRowList>
  </div>
 </template>
 <script>
@ -219,7 +217,6 @@ export default {
        headerHeight: 0,
      },
      isMoreFunction: false,
-
    }
  },
  watch: {