开发自动滚动播放

components/worksList/index.js

@@ -1,4 +1,5 @@
 import behavior from '~/mixins/video'
+let _observer
 Component({
   behaviors: [behavior],
   properties: {
@@ -9,6 +10,18 @@ Component({
         this.setData({
           worksListCopy: newVal
         })
+        this._observer = this.createIntersectionObserver({
+          observeAll: true
+        })
+        this._observer.relativeTo('.playLine')
+          .observe('.videoPreview', (res) => {
+            let intersectionRatio = res.intersectionRatio
+            if (intersectionRatio > 0) {
+              this.setData({
+                currentId: res.dataset.id
+              })
+            }
+          })
       }
     },
     videoType: {
@@ -25,7 +38,6 @@ Component({
   data: {
     worksListCopy: {}
   },
-
   methods: {
     setListFans({
       detail

components/worksList/index.less

@@ -1 +1,7 @@
-.worksList {}
+.playLine {
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 1rpx;
+  background-color: transparent;
+}

components/worksList/index.wxml

@@ -1,5 +1,7 @@
 <view class="worksList">
-  <videoPreview wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}" videoInfo="{{item}}"
+  <view class="playLine">
+  </view>
+  <videoPreview class="videoPreview" wx:for="{{worksListCopy}}" wx:key="index" videoType="{{videoType}}" videoInfo="{{item}}"
     index='{{index}}' currentId="{{currentId}}" data-id="{{item.userRead.id}}" data-audio="{{item.userRead.audioPath}}"
     bind:playVideo="playVideo" bind:openComment="openComment" bind:setListFans="setListFans" bind:playAudio="playAudio">
   </videoPreview>

components/worksList/index.wxss

@@ -0,0 +1,7 @@
+.playLine {
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 1rpx;
+  background-color: transparent;
+}

pages/index/index.js

@@ -55,6 +55,7 @@ Page({
         })
       }, 6000)
     }
+
   },
   onUnload() {
     this.storeBindings.destroyStoreBindings()

pages/index/index.less

@@ -88,4 +88,5 @@
       }
     }
   }
-}
+}
+

pages/index/index.wxml

@@ -29,6 +29,7 @@
   </view>
   <!-- 当一级分类固定定位时占位用的元素 -->
   <view class="{{isFixed?'brace':''}}" />
+
   <!-- 优秀作品展播及官方推荐列表组件 -->
   <worksList id="worksList" wx:if="{{currentType!='3'}}" worksList="{{list}}"
     videoType="{{currentType=='1'?'excellent':'public'}}" tabBarPadding='true' />