up

src/components/son2.vue

@@ -38,7 +38,6 @@ export default {
     //这里存放数据
     return {
       data: [],
-      scroolSon: 0,
     };
   },
   //监听属性 类似于data概念

src/components/son3.vue

@@ -20,7 +20,12 @@
       :key="item.id"
       :class="{ noPad: item.pad }"
     >
-      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+      <div
+        class="rowinfo"
+        :class="{ move: item.move }"
+        @click="toInfo(item.id)"
+        :style="`width: ${item.ww};`"
+      >
         <img
           :style="`height: ${item.hh};`"
           :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
@@ -42,75 +47,18 @@
 export default {
   name: "son3",
   components: {},
+  props: {
+    scrool: {
+      type: Number,
+      default: 0,
+    },
+  },
+
   data() {
     //这里存放数据
     return {
       videoId: null,
-      data: [
-        {
-          id: 9,
-          name: "鸦片趸船",
-          ww: "231px",
-          hh: "143px",
-          pad: true,
-        },
-        {
-          id: 10,
-          name: "飞剪船模型",
-          ww: "161px",
-          hh: "188px",
-          pad: true,
-        },
-        {
-          id: 11,
-          name: "1864年印度到香港的鸦片保险单",
-          ww: "194px",
-          hh: "175px",
-        },
-        {
-          id: 12,
-          name: "1860年印度比尔把鸦片运送至香港的运单",
-          ww: "200px",
-          hh: "174px",
-        },
-        {
-          id: 13,
-          name: "1854年广州和香港的鸦片售卖报告",
-          ww: "194px",
-          hh: "305px",
-        },
-        {
-          id: 14,
-          name: "1865年香港鸦片交换支票",
-          ww: "200px",
-          hh: "181px",
-        },
-        {
-          id: 15,
-          name: "1855年印度比尔把鸦片运至中国的运单",
-          ww: "194px",
-          hh: "207px",
-        },
-        {
-          id: 16,
-          name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
-          ww: "200px",
-          hh: "181px",
-        },
-        { id: 17, name: "1858年香港鸦片交换支票", ww: "193px", hh: "188px" },
-        {
-          id: 18,
-          name: "1859年印度比尔把鸦片运至香港的运单",
-          ww: "195px",
-          hh: "307px",
-        },
-        {
-          id: 19,
-          name: "1855年从印度运送鸦片到香港的保险单",
-          ww: "194px",
-          hh: "300px",
-        },
-      ],
+      data: [],
     };
   },
   //监听属性 类似于data概念
@@ -125,6 +73,12 @@ export default {
         else body.style.overflow = "hidden";
       });
     },
+    scrool(val) {
+      this.data.forEach((v) => {
+        if (v.move) return;
+        else if (val > v.moveNum) v.move = true;
+      });
+    },
   },
   //方法集合
   methods: {
@@ -142,7 +96,99 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.data = [
+      {
+        id: 9,
+        name: "鸦片趸船",
+        ww: "231px",
+        hh: "143px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 10,
+        name: "飞剪船模型",
+        ww: "161px",
+        hh: "188px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 11,
+        name: "1864年印度到香港的鸦片保险单",
+        ww: "194px",
+        hh: "175px",
+        move: false,
+      },
+      {
+        id: 12,
+        name: "1860年印度比尔把鸦片运送至香港的运单",
+        ww: "200px",
+        hh: "174px",
+        move: false,
+      },
+      {
+        id: 13,
+        name: "1854年广州和香港的鸦片售卖报告",
+        ww: "194px",
+        hh: "305px",
+        move: false,
+      },
+      {
+        id: 14,
+        name: "1865年香港鸦片交换支票",
+        ww: "200px",
+        hh: "181px",
+        move: false,
+      },
+      {
+        id: 15,
+        name: "1855年印度比尔把鸦片运至中国的运单",
+        ww: "194px",
+        hh: "207px",
+        move: false,
+      },
+      {
+        id: 16,
+        name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
+        ww: "200px",
+        hh: "181px",
+        move: false,
+      },
+      {
+        id: 17,
+        name: "1858年香港鸦片交换支票",
+        ww: "193px",
+        hh: "188px",
+        move: false,
+      },
+      {
+        id: 18,
+        name: "1859年印度比尔把鸦片运至香港的运单",
+        ww: "195px",
+        hh: "307px",
+        move: false,
+      },
+      {
+        id: 19,
+        name: "1855年从印度运送鸦片到香港的保险单",
+        ww: "194px",
+        hh: "300px",
+        move: false,
+      },
+    ];
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let doms = document.querySelectorAll(".rowinfo");
+        let temp = 0;
+        doms.forEach((v, i) => {
+          if (i === 0) temp = v.getBoundingClientRect().top / 2;
+          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+        });
+      }, 100);
+    });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -194,7 +240,11 @@ export default {
     padding: 0;
     margin-bottom: 50px;
     display: flex;
-    .row {
+    .rowinfo {
+      opacity: 0;
+      transition: all 1s ease-out;
+      transform: translateX(-400px);
+
       & > img {
         width: 100%;
       }
@@ -207,8 +257,15 @@ export default {
         line-height: 24px;
       }
     }
+    .move {
+      opacity: 1;
+      transform: translateX(0px) !important;
+    }
     &:nth-of-type(2n + 1) {
       justify-content: flex-end;
+      .rowinfo {
+        transform: translateX(400px);
+      }
     }
   }
   .noPad {

src/components/son4.vue

@@ -14,7 +14,12 @@
       :key="item.id"
       :class="{ noPad: item.pad }"
     >
-      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+      <div
+        class="rowinfo"
+        :class="{ move: item.move }"
+        @click="toInfo(item.id)"
+        :style="`width: ${item.ww};`"
+      >
         <img
           :style="`height: ${item.hh};`"
           :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
@@ -37,45 +42,17 @@
 export default {
   name: "son4",
   components: {},
+  props: {
+    scrool: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     //这里存放数据
     return {
       videoId: null,
-      data: [
-        {
-          id: 20,
-          name: "罂粟壳",
-          ww: "166px",
-          hh: "90px",
-          pad: true,
-        },
-        {
-          id: 21,
-          name: "东印度公司刀剑",
-          ww: "218px",
-          hh: "311px",
-          pad: true,
-        },
-        {
-          id: 22,
-          name: "东印度旗帜",
-          ww: "254px",
-          hh: "161px",
-          pad: true,
-        },
-        {
-          id: 23,
-          name: "1810年东印度公司伦敦总部印刷铜版画",
-          ww: "232px",
-          hh: "169px",
-        },
-        {
-          id: 24,
-          name: "1828年东印度公司伦敦总部印刷铜版画 ",
-          ww: "233px",
-          hh: "200px",
-        },
-      ],
+      data: [],
     };
   },
   //监听属性 类似于data概念
@@ -90,6 +67,12 @@ export default {
         else body.style.overflow = "hidden";
       });
     },
+    scrool(val) {
+      this.data.forEach((v) => {
+        if (v.move) return;
+        else if (val > v.moveNum) v.move = true;
+      });
+    },
   },
   //方法集合
   methods: {
@@ -107,7 +90,58 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.data = [
+      {
+        id: 20,
+        name: "罂粟壳",
+        ww: "166px",
+        hh: "90px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 21,
+        name: "东印度公司刀剑",
+        ww: "218px",
+        hh: "311px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 22,
+        name: "东印度旗帜",
+        ww: "254px",
+        hh: "161px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 23,
+        name: "1810年东印度公司伦敦总部印刷铜版画",
+        ww: "232px",
+        hh: "169px",
+        move: false,
+      },
+      {
+        id: 24,
+        name: "1828年东印度公司伦敦总部印刷铜版画 ",
+        ww: "233px",
+        hh: "200px",
+        move: false,
+      },
+    ];
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let doms = document.querySelectorAll(".rowinfo");
+        let temp = 0;
+        doms.forEach((v, i) => {
+          if (i === 0) temp = v.getBoundingClientRect().top / 2;
+          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+        });
+      }, 100);
+    });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -158,7 +192,10 @@ export default {
     padding: 0;
     margin-bottom: 50px;
     display: flex;
-    .row {
+    .rowinfo {
+      opacity: 0;
+      transition: all 1s ease-out;
+      transform: translateX(-400px);
       & > img {
         width: 100%;
       }
@@ -171,8 +208,15 @@ export default {
         line-height: 24px;
       }
     }
+    .move {
+      opacity: 1;
+      transform: translateX(0px) !important;
+    }
     &:nth-of-type(2n + 1) {
-      justify-content: flex-end 
+      justify-content: flex-end;
+      .rowinfo {
+        transform: translateX(400px);
+      }
     }
   }
   .noPad {

src/components/son5.vue

@@ -7,7 +7,12 @@
       :key="item.id"
       :class="{ noPad: item.pad, centenAc: item.centen }"
     >
-      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+      <div
+        class="rowinfo"
+        :class="{ move: item.move }"
+        @click="toInfo(item.id)"
+        :style="`width: ${item.ww};`"
+      >
         <img
           :style="`height: ${item.hh};`"
           :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
@@ -23,95 +28,29 @@
 export default {
   name: "son5",
   components: {},
+  props: {
+    scrool: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     //这里存放数据
     return {
-      data: [
-        {
-          id: 25,
-          name: "清鹤顶骨嘴犀角杆竹节形鸦片烟枪",
-          ww: "200px",
-          hh: "43px",
-        },
-        {
-          id: 26,
-          name: "清玉嘴竹杆包铜“光庭写”款瓷斗鸦片烟枪",
-          ww: "184px",
-          hh: "60px",
-        },
-        {
-          id: 27,
-          name: "清玉嘴铜杆“庚午夏”款瓷斗鸦片烟枪",
-          ww: "207px",
-          hh: "45px",
-        },
-        {
-          id: 28,
-          name: "清玻璃罩铜底座青花菊花纹瓷鸦片烟灯",
-          ww: "118px",
-          hh: "237px",
-        },
-        {
-          id: 29,
-          name: "清玻璃罩富贵寿考花鸟纹铜鸦片烟灯",
-          ww: "128px",
-          hh: "231px",
-        },
-        {
-          id: 30,
-          name: "19世纪掐丝洋花卉纹铜胎珐琅木底盖鸦片烟具",
-          ww: "179px",
-          hh: "107px",
-        },
-        {
-          id: 31,
-          name: "清代铜鸦片烟具",
-          ww: "152px",
-          hh: "120px",
-        },
-        {
-          id: 32,
-          name: "清佚名画家绘吸食鸦片图通草纸水彩画",
-          ww: "233px",
-          hh: "183px",
-          pad: true,
-        },
-        {
-          id: 33,
-          name: "19世纪吸食鸦片的中国人印刷铜版画",
-          ww: "237px",
-          hh: "208px",
-          pad: true,
-        },
-        {
-          id: 34,
-          name: "1850年吸食鸦片的中国人彩色印刷铜版画",
-          ww: "251px",
-          hh: "226px",
-          pad: true,
-        },
-        {
-          id: 35,
-          name: "19世纪鸦片危害漫画",
-          ww: "227px",
-          hh: "316px",
-          pad: true,
-          centen: true,
-        },
-        {
-          id: 36,
-          name: "1922年陈乐琴愁城十二景四条屏",
-          ww: "100%",
-          hh: "auto",
-          pad: true,
-        },
-      ],
+      data: [],
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    scrool(val) {
+      this.data.forEach((v) => {
+        if (v.move) return;
+        else if (val > v.moveNum) v.move = true;
+      });
+    },
+  },
   //方法集合
   methods: {
     toInfo(id) {
@@ -128,7 +67,110 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.data = [
+      {
+        id: 25,
+        name: "清鹤顶骨嘴犀角杆竹节形鸦片烟枪",
+        ww: "200px",
+        hh: "43px",
+        move: false,
+      },
+      {
+        id: 26,
+        name: "清玉嘴竹杆包铜“光庭写”款瓷斗鸦片烟枪",
+        ww: "184px",
+        hh: "60px",
+        move: false,
+      },
+      {
+        id: 27,
+        name: "清玉嘴铜杆“庚午夏”款瓷斗鸦片烟枪",
+        ww: "207px",
+        hh: "45px",
+        move: false,
+      },
+      {
+        id: 28,
+        name: "清玻璃罩铜底座青花菊花纹瓷鸦片烟灯",
+        ww: "118px",
+        hh: "237px",
+        move: false,
+      },
+      {
+        id: 29,
+        name: "清玻璃罩富贵寿考花鸟纹铜鸦片烟灯",
+        ww: "128px",
+        hh: "231px",
+        move: false,
+      },
+      {
+        id: 30,
+        name: "19世纪掐丝洋花卉纹铜胎珐琅木底盖鸦片烟具",
+        ww: "179px",
+        hh: "107px",
+        move: false,
+      },
+      {
+        id: 31,
+        name: "清代铜鸦片烟具",
+        ww: "152px",
+        hh: "120px",
+        move: false,
+      },
+      {
+        id: 32,
+        name: "清佚名画家绘吸食鸦片图通草纸水彩画",
+        ww: "233px",
+        hh: "183px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 33,
+        name: "19世纪吸食鸦片的中国人印刷铜版画",
+        ww: "237px",
+        hh: "208px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 34,
+        name: "1850年吸食鸦片的中国人彩色印刷铜版画",
+        ww: "251px",
+        hh: "226px",
+        pad: true,
+        move: false,
+      },
+      {
+        id: 35,
+        name: "19世纪鸦片危害漫画",
+        ww: "227px",
+        hh: "316px",
+        pad: true,
+        centen: true,
+        move: false,
+      },
+      {
+        id: 36,
+        name: "1922年陈乐琴愁城十二景四条屏",
+        ww: "100%",
+        hh: "auto",
+        pad: true,
+        move: false,
+      },
+    ];
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let doms = document.querySelectorAll(".rowinfo");
+        let temp = 0;
+        doms.forEach((v, i) => {
+          if (i === 0) temp = v.getBoundingClientRect().top / 2;
+          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+        });
+      }, 100);
+    });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -137,7 +179,10 @@ export default {
     padding: 0 24px;
     margin-bottom: 50px;
     display: flex;
-    .row {
+    .rowinfo {
+      opacity: 0;
+      transition: all 1s ease-out;
+      transform: translateX(-400px);
       & > img {
         width: 100%;
       }
@@ -150,8 +195,15 @@ export default {
         line-height: 24px;
       }
     }
+    .move {
+      opacity: 1;
+      transform: translateX(0px) !important;
+    }
     &:nth-of-type(2n + 1) {
-      justify-content: flex-end 
+      justify-content: flex-end;
+      .rowinfo {
+        transform: translateX(400px);
+      }
     }
   }
   .noPad {

src/components/son6.vue

@@ -34,7 +34,12 @@
       :key="item.id"
       :class="{ noPad: item.pad }"
     >
-      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+      <div
+        class="rowinfo"
+        :class="{ move: item.move }"
+        @click="toInfo(item.id)"
+        :style="`width: ${item.ww};`"
+      >
         <img
           :style="`height: ${item.hh};`"
           :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
@@ -57,19 +62,18 @@
 export default {
   name: "son6",
   components: {},
+  props: {
+    scrool: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     //这里存放数据
     return {
       videoId: null,
       modelId: null,
-      data: [
-        {
-          id: 37,
-          name: "林则徐画像",
-          ww: "273px",
-          hh: "322px",
-        }
-      ],
+      data: [],
     };
   },
   //监听属性 类似于data概念
@@ -92,6 +96,12 @@ export default {
         else body.style.overflow = "hidden";
       });
     },
+    scrool(val) {
+      this.data.forEach((v) => {
+        if (v.move) return;
+        else if (val > v.moveNum) v.move = true;
+      });
+    },
   },
   //方法集合
   methods: {
@@ -109,7 +119,27 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.data = [
+      {
+        id: 37,
+        name: "林则徐画像",
+        ww: "273px",
+        hh: "322px",
+        move: false,
+      },
+    ];
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let doms = document.querySelectorAll(".rowinfo");
+        let temp = 0;
+        doms.forEach((v, i) => {
+          if (i === 0) temp = v.getBoundingClientRect().top / 2;
+          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+        });
+      }, 100);
+    });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -182,7 +212,10 @@ export default {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
-    .row {
+    .rowinfo {
+      opacity: 0;
+      transition: all 1s ease-out;
+      transform: translateX(-400px);
       & > img {
         width: 100%;
       }
@@ -195,7 +228,10 @@ export default {
         line-height: 24px;
       }
     }
+    .move {
+      opacity: 1;
+      transform: translateX(0px) !important;
+    }
   }
-
 }
 </style>

src/components/son7.vue

@@ -9,7 +9,12 @@
 
     <div class="sonBj1"></div>
     <div class="rowBox" v-for="item in data" :key="item.id">
-      <div class="row" @click="toInfo(item.id)" :style="`width: ${item.ww};`">
+      <div
+        class="rowinfo"
+        :class="{ move: item.move }"
+        @click="toInfo(item.id)"
+        :style="`width: ${item.ww};`"
+      >
         <img
           :style="`height: ${item.hh};`"
           :src="require(`@/assets/img/zhanpin/${item.id}.png`)"
@@ -37,24 +42,17 @@
 export default {
   name: "son7",
   components: {},
+  props: {
+    scrool: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     //这里存放数据
     return {
       videoId: null,
-      data: [
-        {
-          id: 38,
-          name: "销烟池木桩",
-          ww: "267px",
-          hh: "149px",
-        },
-        {
-          id: 39,
-          name: "（油画）销烟壮举",
-          ww: "257px",
-          hh: "190px",
-        },
-      ],
+      data: [],
     };
   },
   //监听属性 类似于data概念
@@ -69,6 +67,12 @@ export default {
         else body.style.overflow = "hidden";
       });
     },
+    scrool(val) {
+      this.data.forEach((v) => {
+        if (v.move) return;
+        else if (val > v.moveNum) v.move = true;
+      });
+    },
   },
   //方法集合
   methods: {
@@ -86,7 +90,34 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.data = [
+      {
+        id: 38,
+        name: "销烟池木桩",
+        ww: "267px",
+        hh: "149px",
+        move: false,
+      },
+      {
+        id: 39,
+        name: "（油画）销烟壮举",
+        ww: "257px",
+        hh: "190px",
+        move: false,
+      },
+    ];
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let doms = document.querySelectorAll(".rowinfo");
+        let temp = 0;
+        doms.forEach((v, i) => {
+          if (i === 0) temp = v.getBoundingClientRect().top / 2;
+          this.data[i].moveNum = v.getBoundingClientRect().top - temp - 100;
+        });
+      }, 100);
+    });
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -137,7 +168,10 @@ export default {
     margin-bottom: 50px;
     display: flex;
     justify-content: center;
-    .row {
+    .rowinfo {
+      opacity: 0;
+      transition: all 1s ease-out;
+      transform: translateX(-400px);
       & > img {
         width: 100%;
       }
@@ -150,6 +184,15 @@ export default {
         line-height: 24px;
       }
     }
+    .move {
+      opacity: 1;
+      transform: translateX(0px) !important;
+    }
+    &:nth-of-type(2n + 1) {
+      .rowinfo {
+        transform: translateX(400px);
+      }
+    }
   }
 }
 </style>