From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 30 Nov 2023 16:36:45 +0800 Subject: [PATCH] fix:是否修改 --- uni_modules/uview-ui/components/u-loadmore/u-loadmore.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 150 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..73c79fe --- /dev/null +++ b/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> -- Gitblit v1.8.0