Summary of uniapp project practice (8) Custom loading components

Sometimes a page request interface takes a long time to load. At this time, a loading page is needed to inform the user that the content is being requested to be loaded. Let's write a simple custom loading component.

Table of contents

• Preparation
• Logical thinking
• Practical exercises
• Effect preview

Preparation

componentsCreate a new component folder in the previous global component directory and name q-loadingit, component q-loading.vue.

Find a few more effective CSS loading animations, and then modify the styles.

Logical thinking

Writing template part

It is required to be extensible, so slotslots can be used to insert content, and it is also convenient for later modification and customization.

Use classand stylebind some values ​​passed by parent components to make it more personalized.

This page is divided into two parts: icons and text prompts, each of which can be customized for display, size, and color.

Writing style part

This part is the icon and text styles and some loading animation content.

Scripting part

This part is mainly the parameters passed by the parent component, and propsthe format is formulated.

Practical exercises

Below is a simple implementation of a loading component.

Template section

<view
  class="q-loading"
  :style="{'backgroundColor': props.bgColor}"
  v-if="props.show"
>
  <view class="q-loading-inner">
    <slot name="load">
      <!-- 图标部分 -->
      <view
        :class="{'q-loading-icon': true, 'pause': !props.show && !props.showIcon}"
        v-if="props.showIcon"
      >
        <slot name="icon">
          <!-- 圆环 -->
          <view
            class="q-loading-item q-loading-circle"
            :style="{'width': props.borSize +'rpx', 'height': props.borSize +'rpx', 'borderWidth': props.borWin + 'rpx', 'borderColor': props.borColor, 'borderLeftColor': props.bordActiveColor}"
            v-if="props.iconName == 'circle'"
          >
          </view>
          <!-- 呼吸 -->
          <view