uni-app简单实现全屏文章详情加载动画

“季节变换，好多人忘了好多人，好多人代替好多人，好多人有好多遗憾，好多人是好多人的遗憾”

实现uni-app简单实现全屏文章详情加载动画难度不大原理就是：星宿UI 在点击文章详情之后先出现加载框，等待数据请求返回成功后再关闭加载框

但是实现方式有两种，第一种就是最简单的使用uni.showModal()，请求结束后执行uni.hideLoading()；其中我们可以根据接口返回的statusCode做不同的提示，不足的就是无法自定义加载的图标

方式一：效果图

方式一：案例

<template>
  <view class="">
    <view class="rui-d">
      加载成功：{{ ruiData }}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lodint: false,
        ruiData: []
      }
    },
    onLoad() {
      this.loding();
    },
    methods: {
      // 加载动画 方式一  uni.showModal(OBJECT)
      loding() {
        uni.showLoading({
            title: '加载中'
        });
        uni.request({
          url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=5',
          success: (res) => {
            console.log(res)
            if (res.statusCode == 200) {
              uni.hideLoading();
              this.ruiData = res.data;
            } else {         
              uni.showLoading({
                title: '加载失败'
              });
            }
          }
        })
      },
    }
  }
</script>
<style>
  .rui-d{
    margin: 20upx;
  }
</style>

第二种就是自定义的，在必要的前提下 我们还得给程序添加一个全屏的背景层，这个取决于动画的色彩和展示效果，需要由v-if来时控制隐藏和显示，但有时候会出现一种情况，就是你的接口加载速度太快，有一种比较生硬的感觉，大家可以写一个定时器 让数据晚一丢丢在赋值

方式二：效果图

方式二：案例

<template>
  <view class="">
    <view class="lodint" v-if="lodint">
      <image class="fengrui-img" src="../../static/loding.gif" mode=""></image>
    </view>

    <view class="rui-d">
      {{ ruiData }}
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lodint: true,
        ruiData: []
      }
    },
    onLoad() {
      this.loding();
    },
    methods: {
      // 加载动画 方式二 自定义加动画
       loding() {
        uni.request({
          url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=5',
          success: (res) => {
            console.log(res)
            if (res.statusCode == 200) {
              // 延迟赋值
              setTimeout(() => {
                this.lodint = false
                this.ruiData = res.data;
              }, 600)
            } else {
              setTimeout(() => {
                this.lodint = false
              }, 1000)
              uni.showLoading({
                title: '加载失败'
              });
            }
          }
        })
      },
    }
  }
</script>
<style>
  .lodint {
    width: 50%;
    height: 30%;
    border-radius: 20upx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .fengrui-img {
    height: 100%;
    width: 100%;
  }
  .rui-d{
    margin: 20upx;
  }
</style>

总结

如果界面没有很高的需求方式一其实uni.showModal其实就已经很好了，如果有自定义动画的需求，那我们在选择方式二的同时也可以在插件市场寻找插件