From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 150 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue b/minipro_standard/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue
new file mode 100644
index 0000000..73c79fe
--- /dev/null
+++ b/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 楂樺害锛屽崟浣峱x 锛堥粯璁� 'auto' 锛�
+ * @property {Boolean} line 鏄惁鏄剧ず宸﹁竟鍒嗗壊绾� 锛堥粯璁� false 锛�
+ * @property {Boolean} dashed // 鏄惁铏氱嚎锛宼rue-铏氱嚎锛宖alse-瀹炵嚎 锛堥粯璁� false 锛�
+ * @event {Function} loadmore status涓簂oadmore鏃讹紝鐐瑰嚮缁勪欢浼氬彂鍑烘浜嬩欢
+ * @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>
--
Gitblit v1.9.3