123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <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>
-
- <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>
-
- 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'
- },
-
- status: {
- type: String,
- default: 'loadmore'
- },
-
- 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
- },
-
- 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}`
- }
- },
-
-
- 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 */
- // 在mp.scss中,赋予了u-line为flex: 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>
|