封装一个 uniapp分页组件

最新推荐文章于 2024-07-26 10:53:22 发布

开发两年半

最新推荐文章于 2024-07-26 10:53:22 发布

阅读量334

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73854491/article/details/139864104

版权

<template>
    <view class="loadingMain">
        <view v-if="status == 1" class="loading">
            <image class="loadingImg" :src="$imgURL + 'public/loading.svg' "></image>
            <text>加载中</text>
        </view>
        <view v-if="status == 2" class="noDate">暂无更多数据</view>
        <view v-if="status == 3" class="noDate">上滑查看更多数据</view>
    </view>
</template>
<script>
export default {
    name: 'loading',
    data() {
        return {}
    },
    props: {
        status: {
            type: [Number, String],
            default: 0
        },
    },
    mounted() {
    },
    methods: {}
}
</script>

<style lang="scss" scoped>
.loadingMain {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;

  .loadingImg {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }

  text {
    font-size: 30rpx;
    color: #999;
  }
}

.noDate {
  padding: 10rpx 0;
  font-size: 24rpx;
  color: #999;
}
</style>