From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue | 145 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 145 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue b/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue new file mode 100644 index 0000000..24fb4b6 --- /dev/null +++ b/uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue @@ -0,0 +1,145 @@ +<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="#E6E8EB" + :hairline="false" + 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="17" + :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="#E6E8EB" + :hairline="false" + 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} color 瀛椾綋棰滆壊锛堥粯璁� '#606266' 锛� + * @property {String} loadingIcon 鍔犺浇鍥炬爣锛堥粯璁� 'circle' 锛� + * @property {String} loadmoreText 鍔犺浇鍓嶇殑鎻愮ず璇紙榛樿 '鍔犺浇鏇村' 锛� + * @property {String} loadingText 鍔犺浇涓彁绀鸿锛堥粯璁� '姝e湪鍔犺浇...' 锛� + * @property {String} nomoreText 娌℃湁鏇村鐨勬彁绀鸿锛堥粯璁� '娌℃湁鏇村浜�' 锛� + * @property {Boolean} isDot 鍒颁笂涓�涓浉閭诲厓绱犵殑璺濈 锛堥粯璁� false 锛� + * @property {String} iconColor 鍔犺浇涓浘鏍囩殑棰滆壊 锛堥粯璁� '#b7b7b7' 锛� + * @property {String | Number} marginTop 涓婅竟璺� 锛堥粯璁� 10 锛� + * @property {String | Number} marginBottom 涓嬭竟璺� 锛堥粯璁� 10 锛� + * @property {String | Number} height 楂樺害锛屽崟浣峱x 锛堥粯璁� 'auto' 锛� + * @property {Boolean} line 鏄惁鏄剧ず宸﹁竟鍒嗗壊绾� 锛堥粯璁� 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