增加一个scroll事件的监听

Author: alistar

src/DemoDescription.txt

@@ -1,4 +1,5 @@
-#### navbar 注意事项
+#### test.vue(navbar) 注意事项
 1 安装swiper3 npm i vue-awesome-swiper@2.6.7 -S 
 2 每一个slide的width，强制auto
-TODO 数据异步获取 切换动画效果  上拉加载  
+TODO 数据异步获取 切换动画效果  上拉加载  
+监控scroll事件

src/commitDetail.txt

@@ -12,3 +12,5 @@ npm i node-sass sass-loader http-proxy-middleware -D
 note: https://github.com/KokoTa/Vue2-transition 路由切换动画
 d5c6d2bf873068e96234181d1afc507fce71a19a
 ***  引入store 改写了请求方式 完成首页和登录页
+6f37a2e017ae903142b25db9a9e67b06e5138412
+*** 增加一个scroll事件的监听

src/components/common/test.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="height:2000px">
     <swiper :options="swiperOption" :not-next-tick="swiperOption.notNextTick" ref="swiper1">
     <!-- slides -->
     <swiper-slide
@@ -14,6 +14,7 @@
     <!-- slides -->
     <swiper-slide>I'm Slide {{floorNavData.activeIndex}}</swiper-slide>
   </swiper>
+  <div class="lorem" :style="{opacity: opacityValue}">Lorem ipsum tam similique dolor veniam iure eveniet non vel ut eum iusto sapiente est.</div>
   </div>
 </template>
 <script>
@@ -44,7 +45,8 @@ export default {
           // setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
           // swiper1.slideTo(n, 500, false);
         }
-      }
+      },
+      opacityValue: 0.9
     }
   },
   computed: {
@@ -55,6 +57,9 @@ export default {
       return this.$refs.swiper2.swiper
     }
   },
+  created () {
+    window.addEventListener('scroll', this.getOpacityValue)
+  },
   mounted () {
     // current swiper instance
     // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
@@ -65,6 +70,10 @@ export default {
   methods: {
     onFloorNav (index) {
       this.floorNavData.activeIndex = index
+    },
+    getOpacityValue () {
+      let b = document.body.scrollTop / 550 || document.documentElement.scrollTop / 550
+      this.opacityValue = b > 0.9 ? 0.9 : b
     }
   }
 }
@@ -76,4 +85,7 @@ export default {
 .is-active {
   border-bottom: 1px solid red;
 }
+.lorem {
+  background: #d9241c;
+}
 </style>

src/page/home/home.vue

@@ -3,6 +3,7 @@
     <head-top signin-up='home'>
       <span slot='logo' class="head_logo"  @click="reload">ele.me</span>
     </head-top>
+    <button style="margin-top:100px" @click="goTest">去测试页面</button>
   </div>
 </template>
 <script>
@@ -37,6 +38,7 @@ export default {
     sortgroupcity () {
       let sortobj = {}
       for (let i = 65; i <= 90; i++) {
+        // 静态 String.fromCharCode() 方法返回使用指定的Unicode值序列创建的字符串。
         if (this.groupcity[String.fromCharCode(i)]) {
           sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)]
         }
@@ -52,7 +54,11 @@ export default {
     },
     // 点击图标刷新页面
     reload () {
+      // window.location 只读属性，返回一个 Location对象Location.reload() 方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面
       window.location.reload()
+    },
+    goTest () {
+      this.$router.push('./test')
     }
   }
 }