fix:是否修改

quanyawei

2023-11-30 f4991944d13b94355fb8aaf03dad7d60ca530ee9

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

New file
@@ -0,0 +1,150 @@
<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: 14px;
            color: $u-content-color;
         }

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