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其实就已经很好了，如果有自定义动画的需求，那我们在选择方式二的同时也可以在插件市场寻找插件