这篇文章主要介绍了Vue如何实现页面加载占位的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue如何实现页面加载占位文章都会有所收获,下面我们一起来看看吧。
效果如下
思路与实现
页面加载时用户等待,此时与用户交互的方式通常有等待层、进度条、加载动画等;本次介绍加载占位,把页面即将展示的样子用css背景展示出来,等数据返回后即可进行页面渲染,可以有效减少页面抖动。
页面组成如下:
占位子组件:使用纯css编写;
获取数据的交易:此处使用setTimeout模拟查询耗时;
数据展示组件;
代码如下:
<template>
<div>
<title-bar :title="title" @goBack="goback"></title-bar>
<div v-if="res==true">
<div v-for="(prd, index) in productList" :key="index">
<prd-item :prd="prd" @toPrdDetail="toPrdDetail"></prd-item>
</div>
</div>
<list-loading v-else></list-loading>
</div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import ListLoading from '@/components/ListLoading';
import PrdItem from "./components/PrdItem";
export default {
name: "hgang", // 分割线
components: {
ListLoading,
TitleBar,
PrdItem
},
data() {
return {
res: false, // 数据是否已经返回
title: '产品列表',
productList: [
{
imgPath: "apple-1001.png",
name: "Apple iPad Air 平板电脑(2020新款)",
price: "4799.00",
sale: "5",
ranking: "10000+评价 平板热卖第5名",
prdShopName: "Apple官方旗舰店"
}
]
};
},
mounted() {
console.log(111);
this.waitDateload();
},
methods: {
waitDateload() {
console.log(this.res);
setTimeout(() => {
this.res = true;
console.log(this.res);
}, 5000);
},
toPrdDetail() {
//
},
goback() {
//
}
},
};
</script>
其中:
ListLoading:加载占位子组件,使用css编写,另加闪光动画效果;
PrdItem:数据返回之后页面渲染子组件;
res:控制占位组件与实际页面切换变量,通过v-if来控制页面展示,数据返回立刻重新渲染页面。
关于“Vue如何实现页面加载占位”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue如何实现页面加载占位”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/m0_46309087/article/details/118440581