<!--
 * @description:
 * @fileName: yasTest.vue
 * @author: huzhiming
 * @date: 2019-11-28 10:09:21
 * @后台人员:
 * @version: v1.0.0
 * @path: 页面访问路径及参数说明
!-->
<template>
<div class="yasTest-wrap">
  <div class="top">height:1000px</div>
  <div :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
    <pre>
      height:100px
      id: {{item.id}}
    </pre>
  </div>
  <div class="down">height:1000px</div>
</div>
</template>

<script>
// horizontal vertical

// initHorizontalExposure
import { debounce, throttle } from 'lodash';

const mixins = {
  data() {
    return {
      yasList: [...Array(5).keys()].map((item,index)=>({id: index, offset:null}))
    }
  },
  created() {},
  mounted() {
    console.log('init mixins');
    window.addEventListener('scroll', debounce(this.handleScroll,500));
    // window.addEventListener('scroll', throttle(this.handleScroll,500));
  },
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {
    handleScroll(e) {
      console.log(e);
    }
  },
  computed: {},
  watch: {},
  components: {}
}

export default {
  name: 'yasTest',
  mixins: [mixins],
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {},
  computed: {},
  watch: {},
  components: {}
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.yasTest-wrap {
  background: #f5f5f5;
  .box {
    width: 100vw;
    height: 200px;
    &:nth-child(2n) {
      background: red;
    }
    &:nth-child(2n+1) {
      background: green;
    }
  }
  .top,.down {
    height: 2000px;
  }
}
//@import "./style.scss";
</style>