自动播放：scrollIntoView;

src/App.vue

@@ -2,15 +2,27 @@
   <div id="app">
     <router-view />
     <BottomBar />
+    <LoadingTip
+      v-show="isShowLoading"
+    />
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import BottomBar from './components/BottomBar.vue'
+import LoadingTip from "@/components/LoadingTip.vue"
 
 export default {
-  components: { BottomBar },
+  components: {
+    BottomBar,
+    LoadingTip,
+  },
+  data() {
+    return {
+      isShowLoading: false,
+    }
+  },
   computed: {
     ...mapState([
       'isMuted'
@@ -27,7 +39,18 @@ export default {
         }
       }
     }
-  }
+  },
+  mounted() {
+    const that = this
+    this.$msgCenter.subscribe('show-loading', function() {
+      that.isShowLoading = true
+    })
+    this.$msgCenter.subscribe('hide-loading', function() {
+      that.isShowLoading = false
+    })
+  },
+  methods: {
+  },
 }
 </script>
 
@@ -48,7 +71,7 @@ body {
 }
 
 .fade-out-leave-active {
-  transition: opacity 1.2s;
+  transition: opacity 1s;
 }
 .fade-out-leave-to {
   opacity: 0;

src/components/LoadingTip.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="loading"
+    :style="{zIndex: $globalConfig.zIndex.loading.self}"
+  >
+    <div class="icon">
+      <img
+        :src="require('@/assets/images/loading.png')"
+        alt=""
+      >
+    </div>
+    <div class="text">
+      加载中
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingTip',
+
+}
+</script>
+
+<style lang="less" scoped>
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  .icon {
+    width: 60px;
+    height: 60px;
+    position: relative;
+    overflow: hidden;
+    >img{
+      height: 60px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      animation: loading 1s steps(15) infinite;
+    }
+  }
+  .text {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #fff;
+  }
+}
+
+@keyframes loading {
+  100% {
+    left: -900px;
+  }
+}
+</style>

src/config.js

@@ -29,6 +29,10 @@ export default {
         }
       },
     },
+    loading: {
+      self: '96',
+      children: {},
+    },
     toast: {
       self: '97',
       children: {},

src/views/SwkkView.vue

@@ -140,6 +140,7 @@
         <li
           v-for="(item, index) in tourList"
           :key="item.sid"
+          ref="scene-item"
           :class="{active: curSceneIdx === index}"
           @click="changeScene(index)"
         >
@@ -226,6 +227,7 @@ export default {
     }
   },
   beforeMount() {
+    this.$msgCenter.publish('show-loading')
   },
   mounted() {
     let floor = this.$route.query.floor
@@ -269,6 +271,7 @@ export default {
 
         player.on("progress", ({ partId, frameId, progress }) => {
           this.curSceneIdx = frameId
+          this.$refs['scene-item'][this.curSceneIdx].scrollIntoView()
           this.autoMovingProgress = Number(progress * 100).toFixed(5)
         })
       })
@@ -304,13 +307,13 @@ export default {
 
       // 导览数据
       kankan.TourManager.on("loaded", (tours) => {
-        console.log('toures: ', tours)
         try {
           this.tourList = tours[0].list
         } catch (e) {
           console.error('没拿到导览数据：', e)
           this.tourList = []
         }
+        this.$msgCenter.publish('hide-loading')
       })
 
       // 全部热点数据