aiot-app/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue

<template>
  <view
    class="u-loadmore"
    :style="[
      $u.addStyle(customStyle),
      {
        backgroundColor: bgColor,
        marginBottom: $u.addUnit(marginBottom),
        marginTop: $u.addUnit(marginTop),
        height: $u.addUnit(height)
      }
    ]"
  >
    <u-line
      length="140rpx"
      :color="lineColor"
      :hairline="false"
      :dashed="dashed"
      v-if="line"
    ></u-line>
    <!-- 加载中和没有更多的状态才显示两边的横线 -->
    <view
      :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''"
      class="u-loadmore__content"
    >
      <view
        class="u-loadmore__content__icon-wrap"
        v-if="status === 'loading' && icon"
      >
        <u-loading-icon
          :color="iconColor"
          :size="iconSize"
          :mode="loadingIcon"
        ></u-loading-icon>
      </view>
      <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
      <text
        class="u-line-1"
        :style="[loadTextStyle]"
        :class="[
          status == 'nomore' && isDot == true
            ? 'u-loadmore__content__dot-text'
            : 'u-loadmore__content__text'
        ]"
        @tap="loadMore"
        >{{ showText }}</text
      >
    </view>
    <u-line
      length="140rpx"
      :color="lineColor"
      :hairline="false"
      :dashed="dashed"
      v-if="line"
    ></u-line>
  </view>
</template>

<script>
import props from './props.js'

/**
 * loadmore 加载更多
 * @description 此组件一般用于标识页面底部加载数据时的状态。
 * @tutorial https://www.uviewui.com/components/loadMore.html
 * @property {String}			status			组件状态（默认 'loadmore' ）
 * @property {String}			bgColor			组件背景颜色，在页面是非白色时会用到（默认 'transparent' ）
 * @property {Boolean}			icon			加载中时是否显示图标（默认 true ）
 * @property {String | Number}	fontSize		字体大小（默认 14 ）
 * @property {String | Number}	iconSize		图标大小（默认 17 ）
 * @property {String}			color			字体颜色（默认 '#606266' ）
 * @property {String}			loadingIcon		加载图标（默认 'circle' ）
 * @property {String}			loadmoreText	加载前的提示语（默认 '加载更多' ）
 * @property {String}			loadingText		加载中提示语（默认 '正在加载...' ）
 * @property {String}			nomoreText		没有更多的提示语（默认 '没有更多了' ）
 * @property {Boolean}			isDot			到上一个相邻元素的距离 （默认 false ）
 * @property {String}			iconColor		加载中图标的颜色 （默认 '#b7b7b7' ）
 * @property {String}			lineColor		线条颜色（默认 #E6E8EB ）
 * @property {String | Number}	marginTop		上边距 （默认 10 ）
 * @property {String | Number}	marginBottom	下边距 （默认 10 ）
 * @property {String | Number}	height			高度，单位px （默认 'auto' ）
 * @property {Boolean}			line			是否显示左边分割线  （默认 false ）
 * @property {Boolean}			dashed		// 是否虚线，true-虚线，false-实线  （默认 false ）
 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
 */
export default {
  name: 'u-loadmore',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data () {
    return {
      // 粗点
      dotText: '●'
    }
  },
  computed: {
    // 加载的文字显示的样式
    loadTextStyle () {
      return {
        color: this.color,
        fontSize: uni.$u.addUnit(this.fontSize),
        lineHeight: uni.$u.addUnit(this.fontSize),
        backgroundColor: this.bgColor
      }
    },
    // 显示的提示文字
    showText () {
      let text = ''
      if (this.status == 'loadmore') text = this.loadmoreText
      else if (this.status == 'loading') text = this.loadingText
      else if (this.status == 'nomore' && this.isDot) text = this.dotText
      else text = this.nomoreText
      return text
    }
  },
  methods: {
    loadMore () {
      // 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
      if (this.status == 'loadmore') this.$emit('loadmore')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.u-loadmore {
  @include flex(row);
  align-items: center;
  justify-content: center;
  flex: 1;

  &__content {
    margin: 0 15px;
    @include flex(row);
    align-items: center;
    justify-content: center;

    &__icon-wrap {
      margin-right: 8px;
    }

    &__text {
      font-size: 32rpx;
      color: $u-content-color;
    }

    &__dot-text {
      font-size: 15px;
      color: $u-tips-color;
    }
  }
}
</style>