|
|
<!--
|
|
|
* @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> |
...
|
...
|
|