【LWC】轻巧的加载预显示行 UI组件 - loading-place-holder #lwc组件 #Salesforce #用户体验

轻巧的加载预显示行 - loading-place-holder

文章目录

• • 轻巧的加载预显示行 - loading-place-holder
  • • 背景介绍
    • 使用例子
    • 完整代码

背景介绍

在加载一个数据量比较大的组件时，在元素被渲染出来之前页面上会存在一些空白区域，元素加载完成突然被渲染之后，空白区域又会被突然填满，用户体验上并不友好。因此，在设计Lightning组件的时候，为了更加良好的用户体验，我引入了预显示行。

它和官方ui库提供的 lightning-spinner的区别在于，spinner并不占位，因此在数据元素加载出来之后，仍然会造成组件空间突变的非良好体验。

效果：

在有思路之后，我们立即行动。先把基本元素给写出来，我们的目标是一个不含有任何信息的预显示行。

把预显示行分割成两部分：左和右，然后在单元格内，用粗潜灰线提示为加载中的信息内容，并分为上下两部分，上半部分的线要比下半部分的线短，这样整体看上去会比较美观。同时，在整个元素的上下部分，添加细的灰色分割线，用来提示整体行的空间位置。

下面来解构设计内容

• 分左右部分
• 粗-浅-灰线提示为内容行
• 每个部分分上下线部分
• 上部分线比下部分线短
• 每个元素的上下用细-略浅-灰提示为分割线

根据我们解构的设计元素，写出CSS部分：

.field {
  padding: 1.5rem 1rem;
}

.border-bottom {
  border-bottom: 1px solid #d9dbdd;
}
.field-name {
  width: 30%;
  padding-right: 0.75rem;
}

.field-value {
  width:70%;
}

.left-column, .right-column{
  float: left;
  display: block;
  width: 50%;
}
.text {
  border-radius: 15rem;
  display: block;
  margin-bottom: .75rem;
  background-color: #f2f2f3;
  height: .5rem;
}
.text-shorter {
  width: 20%;
}
.text:last-child {
  margin-bottom: 0;
}
.text-secondary {
  background-color: #e9eaec;
}
.text-medium {
  width: 60%;
}
.text {
  border-radius: 15rem;
  display: block;
  margin-bottom: .75rem;
  background-color: #f2f2f3;
  height: .5rem;
}
.text-thin{height:6px;border-radius: 15rem}

在HTML中，根据设计结构，分别写出占用元素：

<template>
  <div class="slds-clearfix detail-panel-root slds-card">
    <div class="left-column">
      <template for:each={rows} for:item="row">
        <div key={row.id} class="field border-bottom">
          <div class="text text-primary text-shorter text-thin"></div>
          <div class="text text-secondary text-medium text-thin"></div>
        </div>
      </template>
    </div>
    <div class="right-column">
      <template for:each={rows} for:item="row">
        <div key={row.id} class="field border-bottom">
          <div class="text text-primary text-shorter text-thin"></div>
          <div class="text text-secondary text-medium text-thin"></div>
        </div>
      </template>
    </div>
    </div>
</template>

注意到，为了实现自定义显示行数，我们在各个列的元素上包裹了一个 for:each迭代属性，在js文件中我们需要实现这个循环：

import { LightningElement,api } from 'lwc';

export default class LoadingPlaceHolder extends LightningElement {
  @api
  rowNumber
  get rows() {
    const number = (!!this.rowNumber ? this.rowNumber : 1)
    var row = {}
    var rows = []
    for(let i = 0; i < number; i++) {
      row.id = i
      rows.push(row)
    }
    return rows
  }
}

因此，在我们想要使用这个预加载行组件时，只要用属性 row-number来设定需要几行即可。

使用例子

在我的某个组件中，我想要在组件完成加载之前，显示3行预加载行，则我的组件会这样去调用：

<template if:false={loaded}>
    <c-loading-place-holder row-number="3"></c-loading-place-holder>
</template>
<template if:true={loaded}>
    <!-- 组件内容 -->
</template>

用 loaded参数控制，在加载完数据之前，显示三行预加载行。

在js文件中，定义 loaded参数，并且在钩子函数中，控制这个变量的值：

@track loaded = false
@wire(getRecords, {}) 
wiredRecord({error, data}) {
	if (data) {
		// ...
		this.loaded = true
	}
}

完整代码

完整的代码已经放在我的github上了，有兴趣可以尝试一下。