经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue实现骨架屏的示例代码
来源:jb51  时间:2023/3/17 8:57:07  对本文有异议

vue实现页面加载占位

效果如下

思路与实现

页面加载时用户等待,此时与用户交互的方式通常有等待层、进度条、加载动画等;本次介绍加载占位,把页面即将展示的样子用css背景展示出来,等数据返回后即可进行页面渲染,可以有效减少页面抖动。

页面组成如下:

占位子组件:使用纯css编写;

获取数据的交易:此处使用setTimeout模拟查询耗时;

数据展示组件;

代码如下:

  1. <template>
  2. <div>
  3. <title-bar :title="title" @goBack="goback"></title-bar>
  4. <div v-if="res==true">
  5. <div v-for="(prd, index) in productList" :key="index">
  6. <prd-item :prd="prd" @toPrdDetail="toPrdDetail"></prd-item>
  7. </div>
  8. </div>
  9. <list-loading v-else></list-loading>
  10. </div>
  11. </template>
  12. <script>
  13. import TitleBar from "@/components/TitleBar";
  14. import ListLoading from '@/components/ListLoading';
  15. import PrdItem from "./components/PrdItem";
  16. export default {
  17. name: "hgang", // 分割线
  18. components: {
  19. ListLoading,
  20. TitleBar,
  21. PrdItem
  22. },
  23. data() {
  24. return {
  25. res: false, // 数据是否已经返回
  26. title: '产品列表',
  27. productList: [
  28. {
  29. imgPath: "apple-1001.png",
  30. name: "Apple iPad Air 平板电脑(2020新款)",
  31. price: "4799.00",
  32. sale: "5",
  33. ranking: "10000+评价 平板热卖第5名",
  34. prdShopName: "Apple官方旗舰店"
  35. }
  36. ]
  37. };
  38. },
  39. mounted() {
  40. console.log(111);
  41. this.waitDateload();
  42. },
  43. methods: {
  44. waitDateload() {
  45. console.log(this.res);
  46. setTimeout(() => {
  47. this.res = true;
  48. console.log(this.res);
  49. }, 5000);
  50. },
  51. toPrdDetail() {
  52. //
  53. },
  54. goback() {
  55. //
  56. }
  57. },
  58. };
  59. </script>

其中:

  • ListLoading:加载占位子组件,使用css编写,另加闪光动画效果;
  • PrdItem:数据返回之后页面渲染子组件;
  • res:控制占位组件与实际页面切换变量,通过v-if来控制页面展示,数据返回立刻重新渲染页面。

到此这篇关于Vue实现骨架屏的示例代码的文章就介绍到这了,更多相关Vue骨架屏内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号