From 64b432916af9c9218ab3f3eca614e26c542142ae Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期二, 07 十一月 2023 15:47:13 +0800 Subject: [PATCH] bug --- 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 index e69de29..73c79fe 100644 --- 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 @@ -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 鍔犺浇涓彁绀鸿锛堥粯璁� '姝e湪鍔犺浇...' 锛� + * @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