From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-loadmore/u-loadmore.vue | 203 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 203 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-loadmore/u-loadmore.vue b/uview-ui/components/u-loadmore/u-loadmore.vue
new file mode 100644
index 0000000..6b852a8
--- /dev/null
+++ b/uview-ui/components/u-loadmore/u-loadmore.vue
@@ -0,0 +1,203 @@
+<template>
+ <view class="u-load-more-wrap" :style="{
+ backgroundColor: bgColor,
+ marginBottom: marginBottom + 'rpx',
+ marginTop: marginTop + 'rpx',
+ height: $u.addUnit(height)
+ }">
+ <u-line color="#d4d4d4" length="50"></u-line>
+ <!-- 鍔犺浇涓拰娌℃湁鏇村鐨勭姸鎬佹墠鏄剧ず涓よ竟鐨勬í绾� -->
+ <view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
+ <view class="u-loadmore-icon-wrap">
+ <u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
+ </view>
+ <!-- 濡傛灉娌℃湁鏇村鐨勭姸鎬佷笅锛屾樉绀哄唴瀹逛负dot锛堢矖鐐癸級锛屽姞杞界壒瀹氭牱寮� -->
+ <view class="u-line-1" :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">
+ {{ showText }}
+ </view>
+ </view>
+ <u-line color="#d4d4d4" length="50"></u-line>
+ </view>
+</template>
+
+<script>
+ /**
+ * loadmore 鍔犺浇鏇村
+ * @description 姝ょ粍浠朵竴鑸敤浜庢爣璇嗛〉闈㈠簳閮ㄥ姞杞芥暟鎹椂鐨勭姸鎬併��
+ * @tutorial https://www.uviewui.com/components/loadMore.html
+ * @property {String} status 缁勪欢鐘舵�侊紙榛樿loadmore锛�
+ * @property {String} bg-color 缁勪欢鑳屾櫙棰滆壊锛屽湪椤甸潰鏄潪鐧借壊鏃朵細鐢ㄥ埌锛堥粯璁�#ffffff锛�
+ * @property {Boolean} icon 鍔犺浇涓椂鏄惁鏄剧ず鍥炬爣锛堥粯璁rue锛�
+ * @property {String} icon-type 鍔犺浇涓椂鐨勫浘鏍囩被鍨嬶紙榛樿circle锛�
+ * @property {String} icon-color icon-type涓篶ircle鏃舵湁鏁堬紝鍔犺浇涓殑鍔ㄧ敾鍥炬爣鐨勯鑹诧紙榛樿#b7b7b7锛�
+ * @property {Boolean} is-dot status涓簄omore鏃讹紝鍐呭鏄剧ず涓轰竴涓�"鈼�"锛堥粯璁alse锛�
+ * @property {String} color 瀛椾綋棰滆壊锛堥粯璁�#606266锛�
+ * @property {String Number} margin-top 鍒颁笂涓�涓浉閭诲厓绱犵殑璺濈
+ * @property {String Number} margin-bottom 鍒颁笅涓�涓浉閭诲厓绱犵殑璺濈
+ * @property {Object} load-text 鑷畾涔夋樉绀虹殑鏂囧瓧锛岃涓婃柟璇存槑绀轰緥
+ * @event {Function} loadmore status涓簂oadmore鏃讹紝鐐瑰嚮缁勪欢浼氬彂鍑烘浜嬩欢
+ * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+ */
+ export default {
+ name: "u-loadmore",
+ props: {
+ // 缁勪欢鑳屾櫙鑹�
+ bgColor: {
+ type: String,
+ default: 'transparent'
+ },
+ // 鏄惁鏄剧ず鍔犺浇涓殑鍥炬爣
+ icon: {
+ type: Boolean,
+ default: true
+ },
+ // 瀛椾綋澶у皬
+ fontSize: {
+ type: String,
+ default: '28'
+ },
+ // 瀛椾綋棰滆壊
+ color: {
+ type: String,
+ default: '#606266'
+ },
+ // 缁勪欢鐘舵�侊紝loadmore-鍔犺浇鍓嶇殑鐘舵�侊紝loading-鍔犺浇涓殑鐘舵�侊紝nomore-娌℃湁鏇村鐨勭姸鎬�
+ status: {
+ type: String,
+ default: 'loadmore'
+ },
+ // 鍔犺浇涓姸鎬佺殑鍥炬爣锛宖lower-鑺辨湹鐘跺浘鏍囷紝circle-鍦嗗湀鐘跺浘鏍�
+ iconType: {
+ type: String,
+ default: 'circle'
+ },
+ // 鏄剧ず鐨勬枃瀛�
+ loadText: {
+ type: Object,
+ default () {
+ return {
+ loadmore: '鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇...',
+ nomore: '娌℃湁鏇村浜�'
+ }
+ }
+ },
+ // 鍦ㄢ�滄病鏈夋洿澶氣�濈姸鎬佷笅锛屾槸鍚︽樉绀虹矖鐐�
+ isDot: {
+ type: Boolean,
+ default: false
+ },
+ // 鍔犺浇涓樉绀哄渾鍦堝姩鐢绘椂锛屽姩鐢荤殑棰滆壊
+ iconColor: {
+ type: String,
+ default: '#b7b7b7'
+ },
+ // 涓婅竟璺�
+ marginTop: {
+ type: [String, Number],
+ default: 0
+ },
+ // 涓嬭竟璺�
+ marginBottom: {
+ type: [String, Number],
+ default: 0
+ },
+ // 楂樺害锛屽崟浣峳px
+ height: {
+ type: [String, Number],
+ default: 'auto'
+ }
+ },
+ data() {
+ return {
+ // 绮楃偣
+ dotText: "鈼�"
+ }
+ },
+ computed: {
+ // 鍔犺浇鐨勬枃瀛楁樉绀虹殑鏍峰紡
+ loadTextStyle() {
+ return {
+ color: this.color,
+ fontSize: this.fontSize + 'rpx',
+ position: 'relative',
+ zIndex: 1,
+ backgroundColor: this.bgColor,
+ // 濡傛灉鏄姞杞戒腑鐘舵�侊紝鍔ㄧ敾鍜屾枃瀛楅渶瑕佽窛绂昏繎涓�鐐�
+ }
+ },
+ // 鍔犺浇涓渾鍦堝姩鐢荤殑鏍峰紡
+ cricleStyle() {
+ return {
+ borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
+ }
+ },
+ // 鍔犺浇涓姳鏈靛姩鐢诲舰寮�
+ // 鍔ㄧ敾鐢眀ase64鍥剧墖鐢熸垚锛屾殏涓嶆敮鎸佷慨鏀�
+ flowerStyle() {
+ return {
+ }
+ },
+ // 鏄剧ず鐨勬彁绀烘枃瀛�
+ showText() {
+ let text = '';
+ if(this.status == 'loadmore') text = this.loadText.loadmore;
+ else if(this.status == 'loading') text = this.loadText.loading;
+ else if(this.status == 'nomore' && this.isDot) text = this.dotText;
+ else text = this.loadText.nomore;
+ return text;
+ }
+ },
+ methods: {
+ loadMore() {
+ // 鍙湁鍦ㄢ�滃姞杞芥洿澶氣�濈殑鐘舵�佷笅鎵嶅彂閫佺偣鍑讳簨浠讹紝鍐呭涓嶆弧涓�灞忔椂鏃犳硶瑙﹀彂搴曢儴涓婃媺浜嬩欢锛屾墍浠ラ渶瑕佺偣鍑绘潵瑙﹀彂
+ if(this.status == 'loadmore') this.$emit('loadmore');
+ }
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ @import "../../libs/css/style.components.scss";
+
+ /* #ifdef MP */
+ // 鍦╩p.scss涓紝璧嬩簣浜唘-line涓篺lex: 1锛岃繖閲岄渶瑕佷竴涓槑纭殑闀垮害锛屾墍浠ラ噸缃帀瀹�
+ // 鍦ㄧ粍浠跺唴閮紝鎶婄粍浠跺悕(u-line)褰撳仛閫夋嫨鍣紝鍦ㄥ井淇″紑鍙戝伐鍏蜂細鎻愮ず涓嶅悎娉曪紝浣嗕笉褰卞搷浣跨敤
+ u-line {
+ flex: none;
+ }
+ /* #endif */
+
+ .u-load-more-wrap {
+ @include vue-flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .u-load-more-inner {
+ @include vue-flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 12rpx;
+ }
+
+ .u-more {
+ position: relative;
+ @include vue-flex;
+ justify-content: center;
+ }
+
+ .u-dot-text {
+ font-size: 28rpx;
+ }
+
+ .u-loadmore-icon-wrap {
+ margin-right: 8rpx;
+ }
+
+ .u-loadmore-icon {
+ @include vue-flex;
+ align-items: center;
+ justify-content: center;
+ }
+</style>
--
Gitblit v1.9.3