yinshu_ui/yinshuacx/components/loadMore.vue

<template>
	<view class="loadMore" :class="{'maxHeight': emptyData}">
			<slot></slot>
			<view class="loadingMore" v-if="!emptyData">
				<view class="hoveMore" v-if="more">
					<view class="weui-loading"></view>
					<view class="loading-text">正在加载...</view>
				</view>
				<view class="noData" v-if="!more">
					<view>没有更多数据了</view>
				</view>
			</view>
			<!-- <empty wx:if="{{emptyData}}"></empty> -->
			<empty-data v-if="emptyData"></empty-data>
	</view>
</template>

<script>
	import emptyData from '@/components/emptyData'
	export default {
		props: {
		  more: {
			type: Boolean,
			default: true,
			twoWay: true
		  },
		  emptyData: {
			type: Boolean,
			default: false,
			twoWay: true
		  }
		},
		components: {
			emptyData
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.loadMore{
		position: relative;
		&.maxHeight{
			height: 65vh;
		}
	}
 .loadingMore{
    height: 130rpx;
    // background-color: #f7f7f7;
    .hoveMore{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100rpx;
      .loading-text{
        font-size: 28rpx;
        color: #666666;
      }
    }
    .noData{
      display: flex;
      justify-content: center;
      font-size: 28rpx;
      color: #666666;
      height: 100rpx;
      width: 200rpx;
      align-items: center;
      position: relative;
      z-index: 2;
      margin: 0 auto;
      &:before{
        content:'';
        left: -80rpx;
        height: 1px;
        top: 50rpx;
        width: 60rpx;
        background-color: #999;
        position: absolute;
      }
      &:after{
        content:'';
        right: -80rpx;
        height: 1px;
        top: 50rpx;
        width: 60rpx;
        background-color: #999;
        position: absolute;
      }
    }
   
		}
</style>