一、详情页返回列表页记住滚动条位置;
①在app.vue中配置keep-alive缓存;
<div id="app">
<keep-alive>
<router-view :key="$route.fullPath" v-if="$route.meta.keepAlive"
></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"
></router-view>
</div>
②router中设置keepAlive:true;
{
path: '/reserved',
name: 'reserved',
component: () => import('@/views/personReserve/reserved/index.vue'),
meta: {
title: '个人预约列表',
keepAlive: true
}
},
③列表页使用activated函数查询最新数据;
activated() {
this.getReserveList();
},
二、下拉刷新数据;上拉加载更多数据;
这里主要介绍使用vant框架中方法;
①下拉刷新使用PullRefresh;
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<p>刷新次数: {{ count }}</p>
</van-pull-refresh>
import { Toast } from 'vant';
export default {
data() {
return {
count: 0,
isLoading: false,
};
},
methods: {
onRefresh() {
setTimeout(() => {
Toast('刷新成功');
this.isLoading = false;
this.count++;
}, 1000);
},
},
};
②上拉加载更多使用list列表;
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
</van-list>
export default {
data() {
return {
loading: false,
finished: false,
};
},
methods: {
getReserveList() {
//预约列表
this.loading = true;
getTeamReserveListApi(this.listQuery)
.then((res) => {
if (res.data.code == 1) {
this.reserveList =
this.listQuery.curPage == 1
? res.data.data
: this.reserveList.concat(res.data.data);
this.loading = false;
this.refreshing = false;
if (this.reserveList.length >= res.data.totalCount) {
this.finished = true;
}
} else {
//给予提示
this.loading = false;
this.refreshing = false;
handleMessage(res.data.msg);
}
})
.catch((err) => {
this.loading = false;
this.refreshing = false;
handleMessage(err);
});
},
onLoad() {
//下拉刷新
setTimeout(() => {
this.listQuery.curPage++;
this.getReserveList();
}, 1000);
},
},
};
三、返回顶部;
<template>
<div class="center">
<div class="btnTop" v-if="btnFlag" @click="backTop()">
<i class="el-icon-top"></i>顶部
</div>
</div>
</template>
<script>
export default {
data() {
return {
btnFlag: false,
scrollTop: "",
};
},
// vue的两个生命钩子,这里不多解释。
// window对象,所有浏览器都支持window对象。它表示浏览器窗口,监听滚动事件
mounted() {
window.addEventListener("scroll", this.scrollToTop);
},
destroyed() {
window.removeEventListener("scroll", this.scrollToTop);
},
methods: {
// 点击图片回到顶部方法,加计时器是为了过渡顺滑
backTop() {
let that = this;
let timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
that.scrollTop + ispeed;
if (that.scrollTop === 0) {
clearInterval(timer);
}
}, 16);
},
// 为了计算距离顶部的高度,当高度大于200显示回顶部图标,小于200则隐藏
scrollToTop() {
let that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 200) {
that.btnFlag = true;
} else {
that.btnFlag = false;
}
},
},
};
</script>
<style scoped>
.center .btnTop {
text-align: center;
position: fixed;
right: 20px;
bottom: 30px;
cursor: pointer;
padding: 10px;
border-radius: 50%;
background: #0464c6;
color: #fff;
}
</style>
四、左上角返回到指定页面;
在返回页面根据beforeRouteEnter函数判断跳转路径
beforeRouteEnter(to, from, next) {
if (from.name == "home") {
next((vm) => {
//跳转代码
});
} else {
next();
}
},
五、ios系统与安卓系统日期格式问题;
说明:ios系统时间格式不支持毫秒和特殊符号短横线;
this.currentDate = new Date(timeRemoveMill(day).replace(/-/g, "/"))
function timeRemoveMill(time) { // 时间去掉毫秒
if (time) {
let date = ''
if (typeof time === 'number') {
date = parseTime(time)
} else {
date = time
}
if (date && date.indexOf('.') > -1) {
date = date.substr(0, date.indexOf('.'))
}
return date
}
}