bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -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>