保存滚动条状态

src/pages/country_addr/index.vue

@@ -4,11 +4,11 @@
       <img src="@/assets/images/time.png" srcset="@/assets/images/addr.png x, @/assets/images/time@2x.png 2x">
     </a>
     <slide :items="items" class="slide-layer">
-      <div slot="item" slot-scope="{data}" class="ca-slide-item" @click="clickHandle(data)">
+      <div slot="item" slot-scope="{data}" class="ca-slide-item">
         <h2>{{data.title}}</h2>
         <p>点击文物查看详细介绍</p>
         <div class="img-layout">
-          <div v-for="img in data.images" :key="img"><img :src="img"></div>
+          <div v-for="(item,i) in data.images" :key="i" @click="clickHandle(item)"><img :src="item.img"></div>
         </div>
       </div>
     </slide>
@@ -28,72 +28,120 @@ export default {
         {
           title: '德国',
           images: [
-            require('@/assets/images/ca_1.png'),
-            require('@/assets/images/ca_2.png'),
-            require('@/assets/images/ca_3.png')
+            {
+              title: '“好时光”龙像',
+              img: require('@/assets/images/ca_1.png')
+            },
+            {
+              title: '皇家花瓶',
+              img: require('@/assets/images/ca_2.png')
+            },
+            {
+              title: '陶制火鸡造型盖碗',
+              img: require('@/assets/images/ca_3.png')
+            }
           ]
         },
         {
           title: '中国',
           images: [
-            require('@/assets/images/ca_4.png'),
-            require('@/assets/images/ca_5.png')
+            {
+              title: '牧童归家',
+              img: require('@/assets/images/ca_4.png')
+            },
+            {
+              title: '青瓷盘',
+              img: require('@/assets/images/ca_5.png')
+            }
           ]
         },
         {
           title: '意大利',
           images: [
-            require('@/assets/images/ca_6.png'),
-            require('@/assets/images/ca_7.png'),
-            require('@/assets/images/ca_8.png')
+            {
+              title: '绝代艳后玛丽·安托瓦内特花瓶',
+              img: require('@/assets/images/ca_6.png')
+            },
+            {
+              title: '琴图里佩瓷钵',
+              img: require('@/assets/images/ca_7.png')
+            },
+            {
+              title: '双耳细颈瓶',
+              img: require('@/assets/images/ca_8.png')
+            }
           ]
         },
         {
           title: '法国',
           images: [
-            require('@/assets/images/ca_11.png')
+            {
+              title: '埃米尔·加莱的盘子',
+              img: require('@/assets/images/ca_11.png')
+            }
           ]
         },
         {
           title: '比利时',
           images: [
-            require('@/assets/images/ca_9.png')
+            {
+              title: '陶瓷壶',
+              img: require('@/assets/images/ca_9.png')
+            }
           ]
         },
         {
           title: '西班牙',
           images: [
-            require('@/assets/images/ca_15.png')
+            {
+              title: '黄金盘',
+              img: require('@/assets/images/ca_15.png')
+            }
           ]
         },
         {
           title: '希腊',
           images: [
-            require('@/assets/images/ca_16.png')
+            {
+              title: '锡釉陶器',
+              img: require('@/assets/images/ca_16.png')
+            }
           ]
         },
         {
           title: '土耳其',
           images: [
-            require('@/assets/images/ca_14.png')
+            {
+              title: '伊兹尼克瓶克瓶',
+              img: require('@/assets/images/ca_14.png')
+            }
           ]
         },
         {
           title: '厄瓜多尔',
           images: [
-            require('@/assets/images/ca_10.png')
+            {
+              title: '吃古柯叶的祭司',
+              img: require('@/assets/images/ca_10.png')
+            }
           ]
         },
         {
           title: '秘鲁',
           images: [
-            require('@/assets/images/ca_12.png')
+            {
+              title: '莫切人物陶罐像',
+              img: require('@/assets/images/ca_12.png')
+            }
           ]
         },
         {
           title: '日本',
           images: [
-            require('@/assets/images/ca_13.png')
+            {
+              title: '日式花瓶',
+              img: require('@/assets/images/ca_13.png')
+            }
           ]
         }
       ]
@@ -101,6 +149,7 @@ export default {
   },
   methods: {
     clickHandle (item) {
+      console.log(item)
       let url = this.getUrl(item.title)
       if (url) {
         this.$router.push({name: 'external', params: {src: url}})

src/pages/country_time/index.vue

@@ -3,7 +3,7 @@
     <a @click="$router.replace({name: 'country_addr'})" class="cut">
       <img src="@/assets/images/addr.png" srcset="@/assets/images/addr.png x, @/assets/images/addr@2x.png 2x">
     </a>
-    <div class="ct-layer">
+    <div class="ct-layer" @scroll="scrollHandle" ref="layout">
       <div class="content">
         <div v-for="(item, i) in items" :key="'country' + i" class="ct-item">
           <div class="country">
@@ -25,6 +25,7 @@ export default {
   name: 'country_time',
   data () {
     return {
+      top: 0,
       items: [
         {
           title: '锡釉陶器',
@@ -51,7 +52,7 @@ export default {
           relic: require('@/assets/images/coll_abbr_8.png')
         },
         {
-          title: '青釉鱼盘',
+          title: '青瓷盘',
           time: '13/14世纪（元朝）',
           country: require('@/assets/images/country_5.png'),
           relic: require('@/assets/images/coll_abbr_11.png')
@@ -94,7 +95,7 @@ export default {
         },
 
         {
-          title: '绝代艳后玛丽安托瓦内特花瓶',
+          title: '绝代艳后玛丽·安托瓦内特花瓶',
           time: '1774年',
           country: require('@/assets/images/country_12.png'),
           relic: require('@/assets/images/coll_abbr_7.png')
@@ -112,7 +113,7 @@ export default {
           relic: require('@/assets/images/coll_abbr_4.png')
         },
         {
-          title: '埃米尔加莱的盘子',
+          title: '埃米尔·加莱的盘子',
           time: '1878/1880年',
           country: require('@/assets/images/country_15.png'),
           relic: require('@/assets/images/coll_abbr_1.png')
@@ -128,14 +129,25 @@ export default {
   },
   methods: {
     clickHandle (item) {
-      console.log(item.title)
       let url = this.getUrl(item.title)
       if (url) {
         this.$router.push({name: 'external', params: {src: url}})
       } else {
         alert('该文物正在努力建设中')
       }
+    },
+    scrollHandle () {
+      this.top = this.$refs.layout.scrollTop
     }
+  },
+  activated () {
+    this.src = this.$route.params.src
+    let interval = setInterval(() => {
+      if (this.$refs.layout.offsetHeight > 0) {
+        this.$refs.layout.scrollTop = this.top
+        clearInterval(interval)
+      }
+    }, 16)
   }
 }
 </script>

src/url.js

@@ -1,17 +1,17 @@
 let urls = {
   '牧童归家': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger16',
-  '埃米尔·': '加莱的盘子 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger08',
-  '绝代艳后玛丽·': '安托瓦内特花瓶 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger09',
+  '埃米尔·加莱的盘子': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger08',
+  '绝代艳后玛丽·安托瓦内特花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger09',
   '陶瓷壶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger11',
   '皇家花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger15',
   '吃古柯叶的祭司': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger02',
-  '花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger05',
+  '日式花瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger05',
   '莫切人物陶罐像': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger01',
   '锡釉陶器': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger10',
   '双耳细颈瓶颈瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger12',
   '黄金盘': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger07',
   '伊兹尼克瓶克瓶': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger03',
-  '好时光”': '龙像 http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger14',
+  '“好时光”龙像': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger14',
   '琴图里佩瓷钵': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger13',
   '陶制火鸡造型盖碗': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger06',
   '青瓷盘': 'http://model3d.4dage.com/3D/2018/model/DG/Model.html?m=Ger04'