骨架屏
骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本。在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。（先占位，内容逐渐呈现）
在uview插件中有骨架屏
在进入详情页时，应当先拿到数据再显示修改和删除按钮
使用uni-load-more组件开发加载中效果
在文档中找到这个组件文档，然后通过插件市场引入编辑器
用法：
将整个DOM结构除了最外面一个view根标签之外的所有内容全部包裹在一个view容器里，然后在data中定义一个变量loadState来控制是否使用组件，这个变量值是布尔值，给包裹DOM体的这个盒子做if判断，在DOM体下面的else分支中引入uni-load-more这个组件
loadState变量就是一个falg，用来改变状态，改变状态的时机是网络请求拿到了返回值，证明前端成功获取到数据了，这个时候，将loadState的值置为true，这个组件就会进入if判断的成功分支，没有改变状态就是默认的false，就走else分支，在页面中加载uni-load-more组件，显示正在加载
<template>
<view class="detail">
<view v-if="loadState">
<view class="title">{{detail.title}}</view>
<view class="info">
<text>{{detail.author}}</text>
<!-- format属性这样写和不写一模一样，如果是年月日时分秒都要写就可以不写这个属性了 -->
<text>
<uni-dateformat :date="detail.posttime" :threshold="[60000, 3600000]" format="yyyy年MM月dd日 hh:mm:ss">
</uni-dateformat>
</text>
</view>
<view class="content">
{{detail.content}}
</view>
<view class="btnGroup">
<button size="mini">修改</button>
<button size="mini" type="warn">删除</button>
</view>
</view>
<view v-else>
<!-- more: 加载前 loading: 加载中 no-more: 没有更多数据 -->
<uni-load-more status="loading"></uni-load-more>
</view>
</view>
</template>
<script>
let id;
export default {
data() {
return {
detail: {},
// 加载更多组件,默认初始值为false
loadState: false
};
},
onLoad(e) {
id = e.id;
this.getDetail();
},
methods: {
// 获取详情数据的方法,调用云函数，传递id
// then里面的res就是通过传递的id返回的返回值
getDetail() {
uniCloud.callFunction({
name: "art_get_row",
data: {
// id:id
id
}
}).then(res => {
console.log(res);
// 返回值是一个数组,里面只有一个值
this.detail = res.result.data[0],
// 拿到数据后,将正在加载组件的状态置为true
this.loadState = true
});
}
}
}
</script>
动态设置当前页的标题
将标题栏的文字替换成当前新闻的标题
文档在uni-app API 设置导航条
在网络数据请求成功，并且将加载更多组件的状态设置为true之后，
<script>
let id;
export default {
data() {
return {
detail: {},
// 加载更多组件,默认初始值为false
loadState: false
};
},
onLoad(e) {
id = e.id;
this.getDetail();
},
methods: {
// 获取详情数据的方法,调用云函数，传递id
// then里面的res就是通过传递的id返回的返回值
getDetail() {
uniCloud.callFunction({
name: "art_get_row",
data: {
// id:id
id
}
}).then(res => {
console.log(res);
// 返回值是一个数组,里面只有一个值
this.detail = res.result.data[0],
// 拿到数据后,将正在加载组件的状态置为true
this.loadState = true,
// 动态设置标题栏为新闻title
uni.setNavigationBarTitle({
title:this.detail.title
})
});
}
}
}
</script>
