- 前言,在没有使用媒体查询的情况下实现响应式在不同屏幕下的页面效果,在组件中我还使用了防抖进行优化,目的是因为resize窗口在被触发的时候,会比较频繁,在不断频繁触发的时候会容易造成页面卡顿,所以需要进行优化;
监听resize窗口变化,实现不同屏幕下进行对应的适配和渲染组件;
- 监听resize事件,在页面发生改变的时候就会实时的获取到对应的宽度;
- 获取到屏幕的宽度,只有在resize监听中才能实时获取到屏幕宽度;
- 根据不同的宽度分割出不同的屏幕,注意一下,目前组件中只有五种尺寸的宽度,分别是980以下,980,1280,1366,1920这五种尺寸;
getScreen () {
this.width = document.documentElement.clientWidth || document.body.clientWidth;
if (this.width <= 980) {
this.getWList = list1;
this.checkType.type = 'one';
} else if (this.width <= 1280) {
this.getWList = list2;
this.checkType.type = 'two';
} else if (this.width <= 1366) {
this.getWList = list3;
this.checkType.type = 'three';
} else if (this.width < 1920) {
this.getWList = list4;
this.checkType.type = 'four';
} else {
this.getWList = list5;
this.checkType.type = 'five';
}
}
根据响应式中的checkType属性实时的获取不同屏幕下的类型,根据类型来判断当前渲染的页面屏幕;
- 在data响应式中定义一个触发的状态,这些状态会根据不同的屏幕下渲染出对应的页面和组件,另外还要定义一个数组,也是根据不同的屏幕渲染不同的页面组件
- 根据屏幕的状态判断是渲染到哪一个屏幕下的页面;
<template>
<div class="home">
<template v-if="checkType.type==='one'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:red">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='two'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:green">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='three'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:yellow">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='four'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:violet">{{item.name}}</li>
</div>
</template>
<template v-else>
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:blue">{{item.name}}</li>
</div>
</template>
</div>
</template>
data () {
return {
getWList: [],
width: 0,
checkType: {
type: 'one'
}
}
},
对resize进行防抖处理;
- 因为resize频繁的触发更新,会导致页面卡顿,所以需要进行一些处理和优化;
mounted () {
addEventListener('resize', () => {
let timeResize = false;
timer = setTimeout(() => {
if (!timeResize) {
timeResize = true;
this.getScreen();
timeResize = false;
}
}, 100)
});
this.getScreen()
},
所有的代码展示,后续还会把组件进行封装,使用户传入对应的屏幕参数就可以实现响应式,而没有必要看那么多的逻辑性代码
<template>
<div class="home">
<template v-if="checkType.type==='one'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:red">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='two'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:green">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='three'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:yellow">{{item.name}}</li>
</div>
</template>
<template v-else-if="checkType.type==='four'">
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:violet">{{item.name}}</li>
</div>
</template>
<template v-else>
<div v-for="(item,index) in getWList" :key="index">
<li style="background-color:blue">{{item.name}}</li>
</div>
</template>
</div>
</template>
<script>
const list1 = [{ name: 'home' }, { name: 'search' }, { name: 'tabbar' }, { name: 'user' }, { name: 'category' }];
const list2 = [{ name: 'red' }, { name: 'green' }, { name: 'black' }, { name: 'whte' }, { name: 'yellow' }];
const list3 = [{ name: '惊喜' }, { name: '或者' }, { name: '讨论' }, { name: '第三组' }, { name: '越看' }];
const list4 = [{ name: 'back' }, { name: 'cart' }, { name: 'muber' }, { name: 'string' }, { name: 'babic' }];
const list5 = [{ name: 'list' }, { name: 'javascript' }, { name: 'vue' }, { name: 'react' }, { name: 'c++' }];
let timer = null;
export default {
name: 'home',
data () {
return {
getWList: [],
width: 0,
checkType: {
type: 'one'
}
}
},
mounted () {
addEventListener('resize', () => {
let timeResize = false;
timer = setTimeout(() => {
if (!timeResize) {
timeResize = true;
this.getScreen();
timeResize = false;
}
}, 100)
});
this.getScreen()
},
methods: {
getScreen () {
this.width = document.documentElement.clientWidth || document.body.clientWidth;
if (this.width <= 980) {
this.getWList = list1;
this.checkType.type = 'one';
} else if (this.width <= 1280) {
this.getWList = list2;
this.checkType.type = 'two';
} else if (this.width <= 1366) {
this.getWList = list3;
this.checkType.type = 'three';
} else if (this.width < 1920) {
this.getWList = list4;
this.checkType.type = 'four';
} else {
this.getWList = list5;
this.checkType.type = 'five';
}
}
},
destoryed () {
clearTimeout(timer)
}
}
</script>
<style>
</style>