1. vue数据请求完成之前的'Loading'动画, 它将给用户更好的使用体验. 这里将使用项目中的 loading 动画为例.
这里以组件的方式创建并使用 loading,
创建组件
a. 新建 .vue
文件: src -> components -> laoding -> tran.vue
b. 编辑 tran.vue
文件
<template>
<div class="loading">
<div class="center">
<div class="bgi"></div>
</div>
<div class="yy"></div>
</div>
</template>
<script>
export default {
name: "Loading"// 定义的组件名称 使用时写法:loading
}
</script>
<style scoped>
.loading {
position: fixed;
left: 0;
top: 0;
background-color: #fff;
width: 100vw;
height: 100vh;
z-index: 1000;
}
.center{
width: 3.5rem;
height: 3.5rem;
position: relative;
top: 40%;
left: 39%;
animation: ani 1s linear 0s infinite;
}
.bgi{
width: 100%;
height: 100%;
background: url('../../L-imgs/icon_loading.png') center center no-repeat transparent;
-webkit-background-size: 100% 700%;
background-size: 100% 700%;
background-position: 0 0;
animation: ani_tt 9s linear 0s infinite;
}
.yy{
width: 1.5rem;
height: 1rem;
border-radius: 50% / 50%;
background-color: #000;
margin: 0 auto;
position: relative;
top: 40%;
animation: ani_yy 1s linear 0s infinite;
}
/*关键帧动画*/
@keyframes ani {
0% {
top: 40%;
opacity: 1;
}
50%{
top: 32%;
opacity: 0.1;
}
100%{
top: 40%;
opacity: 1;
}
}
@keyframes ani_tt {
0% {background-position:0 0;}
14.2% {background-position:0 0;}
14.2001% {background-position:0 16%;}
28.4% {background-position:0 16%;}
28.4001% {background-position:0 33%;}
42.6% {background-position:0 33%;}
42.6001% {background-position:0 50%;}
56.8% {background-position:0 50%;}
56.8001% {background-position:0 67%;}
71% {background-position:0 67%;}
71.0001% {background-position:0 84%;}
85.2% {background-position:0 84%;}
85.2001% {background-position:0 100%;}
100% {background-position:0 100%;}
}
@keyframes ani_yy {
0%{
width: 1.5rem;
opacity: 0.05;
}
50%{
width: 3rem;
opacity: 0.01;
}
100%{
width: 1.5rem;
opacity: 0.05;
}
}
</style>
使用组件
原理: 通过自定义一个变量 isLoading
初始化为 true
,在数据请求成功之后将变量改为 false
,在 template
中通过变量来控制是否显示隐藏,使用 vue
自带的 过渡效果 增加用户体验
a. .vue
文件使用代码示例片段
<template>
<div>
<transition name="fade">
<loading v-if="isLoading"></loading>
</transition>
</div>
</template>
<script>
import Loading from '../components/loading/trans'
export default{
components:{ Loading },
data(){
return{
isLoading: true
}
},
mounted() {
const me = this
// 初始化页面数据
me.loadPageData()
},
methosd:{
loadPageData: function() {
// axios 请求页面数据 .then 中将状态值修改 this.isLoading = false
},
}
}
<script>
参考博客: https://www.jianshu.com/p/104bbb01b222
即:一改变vuex里的数据,便触发localStorage.setItem
方法,参考如下代码:
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
function storeLocalStore (state) {
window.localStorage.setItem("userMsg",JSON.stringify(state));
}
export default new Vuex.Store({
state: {
username: "王二",
schedulename: "标题",
scheduleid: 0,
},
mutations: {
storeUsername (state,name) {
state.username = name
storeLocalStore (state)
},
storeSchedulename (state,name) {
state.schedulename = name
storeLocalStore (state)
},
storeScheduleid (state,id) {
state.scheduleid = Number(id)
storeLocalStore (state)
},
}
})
然后在页面加载时再从localStorage里将数据取回来放到vuex里,于是我在 App.vue
的 created
钩子函数里写下了如下代码:
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//考虑到第一次加载项目时localStorage里没有userMsg的信息,所以在前面要先做判断
以上的解决方法由于要频繁地触发 localStorage.setItem
方法,所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里,我们直接用localStorage做状态管理好了,似乎也没有必要再用vuex。因此不推荐使用.
2.如果有什么方法能够监听到页面的刷新事件,然后在那个监听方法里将Vuex里的数据储存到localStorage里,那该多好。
很幸运,还真有这样的监听事件,我们可以用 beforeunload
来达到以上目的,在 App.vue
的 created
钩子函数里写下了如下代码:
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
参考博客: https://blog.csdn.net/aliven1/article/details/80743470
3. 路由动画
路由切换显得自然,使用户有更好的体验.
App.vue文件
<template>
<div id="app">
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
transitionName: 'slide-left'
}
},
watch: {
'$route'(to, from) {
if (to.path == '/') {
this.transitionName = 'slide-right';
} else {
this.transitionName = 'slide-left';
}
}
},
}
</script>
<style>
/*路由动画的样式*/
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}
</style>
4.引擎:有四大引擎显得尤为重要: V8 :不仅提升了 JS 的执行效率,助力 ES 规范落地,而且催生了 Node.js 浏览器引擎:以 Webkit、Blink、Chromium 为典型代表,浏览器的高速发展为 Web 的繁荣奠定了基础 Node.js :大大拓展了前端的生存空间,以至于“Any application that can be written in JavaScript, will eventually be written in JavaScript.” Hybrid 容器:让被 App 统治的移动互联网时代也给 Web 开发留下了一席之地,小程序是典型代表
小知识:
1.vue2.0返回上一页 @click="$router.back(-1)"