vue移动端项目返回上次浏览位置

效果描述：

列表查询页、每页10条数据、滚动至底部加载更多数据、点击进入详情。再次返回列表查询页不希望从第一页重新查找、而是直接滚动到上次浏览的位置。

实现思路：

点击列表进入详情页时、记录当前点击的位置、将参数传入详情页、返回列表页时将参数再传递回来。列表页初次加载时判断是否存在上次记录的位置参数、存在表示有历史记录、直接请求数据、找到位置、然后调用 scrollIntoView() 方法滚动到指定位置。

举例：我上一次点击了第180条数据、记录索引108、每页10条数据、所以当时记录的页码pageNo是第 11 页、下一次返回列表界面、第一pageNo是1、一次性请求110条数据、pageSize是110、数据请求回来后、DOM渲染结束、找到相应的位置、滚动到指定位置即可。

 <divv-for="(item, index) in dataList":key="index"class="contentDataList":id="'item' + index"@click="InfoClick(item, index)"v-show="dataList.length > 0"><div class="contentData"><div class="contentName">{{ item.deviceName }}</div><div class="contentManufactor">{{ item.manufactor }}</div><div class="contentNumber flex"><div>{{ item.deviceNo }}</div><div>{{ item.certificateNo }}</div></div></div><div class="dataSource flex"><div>数据来源</div><van-icon name="arrow" /></div></div><EmptyData v-show="dataList.length === 0"></EmptyData>

data(){return {historyType: false, // 是否记录了上次位置}
},
mounted() {// 滚动到上次浏览的位置let itemVal = this.$route.params;this.params.pageNo = 1;this.dataList = [];if (itemVal.indexVal) {if (itemVal.indexVal > 10) {this.params.pageSize = Math.ceil(itemVal.indexVal + 1)this.historyType = true;} else {this.params.pageSize = 10;}} else {itemVal.indexVal = 0;}this.getTransferFileList().then(() => {this.$nextTick(() => {const timer = setInterval(() => {const item = document.getElementById("item" + itemVal.indexVal);if (item) {item.scrollIntoView({behavior: "smooth", // 平滑过渡block: "center", // 页面中央});clearInterval(timer);}}, 500);});});},
methods:{getTransferFileList() {return getTransferFileList(this.params).then((res) => {const data = res.data;this.loading = false;if (data.code === 200) {this.dataList = this.dataList.concat(data.data.list);// 向上取整,有小数就整数部分加1if (this.historyType) {this.params.pageNo = Math.ceil(this.params.pageSize / 10);this.params.pageSize = 10;this.historyType = false;}if (data.data.isLastPage) {this.finished = true; // 关闭load事件}}});}
}

以上方法是未优化之前的、鉴于最近项目这个功能比较多、封装进公共方法。

下面是优化后的。

首先、将代码优化、放入公共方法

/*** 返回上一页历史记录位置--计算pageSize* @param {params}  传入页面参数 paramsData{ params（接口请求参数）、indexVal是记录的位置索引、itemName（id标识）defaultPageSize(支持自定义pageSize)}* indexVal{ Number } 索引必须Number* itemName{ String } id标识必须字符串* defaultPageSize{ Number } 自定义pageSize必须Number
*/
export const returnHistorySeat = (paramsData) => {const defaultPageSize = paramsData.defaultPageSize ? paramsData.defaultPageSize : 10if (paramsData.indexVal) {paramsData.params.pageSize = paramsData.indexVal > defaultPageSize ? paramsData.indexVal + defaultPageSize + 1 : defaultPageSizeparamsData.params.pageNo = 1;} else {paramsData.indexVal = 0;}paramsData.params.historyType = Boolean(paramsData.indexVal);return paramsData
}
/*** 返回上一页历史记录位置--滚动到目标位置* @param {params}  传入页面参数 paramsData{ params（接口请求参数）、indexVal是记录的位置索引、itemName（id标识）}* @param {String}  behaviorVal滑动效果、smooth 平滑过渡、instant 直接过去、 auto默认值、正常滑动* @param {String}  blockVal滚动位置、center页面中央、start页面顶部、end页面底部、nearest最近的位置
*/
export const scrollIntoViewHistory = (paramsData) => {const defaultPageSize = paramsData.defaultPageSize ? paramsData.defaultPageSize : 10if (paramsData.params.historyType) {paramsData.params.pageNo = Math.ceil(paramsData.indexVal / defaultPageSize);paramsData.params.pageSize = defaultPageSize;paramsData.params.historyType = false;}const timer = setInterval(() => {const domItem = document.getElementById(paramsData.itemName + paramsData.indexVal);if (domItem) {domItem.scrollIntoView({behavior: paramsData.behaviorVal ? paramsData.behaviorVal : "smooth",block: paramsData.blockVal ? paramsData.blockVal : "center",// inline:'auto'   // 滚动至容器左右位置  值和block用法一致});clearInterval(timer);}// 防止Dom一直拿不到、两分钟后停止定时器setTimeout(() => {clearInterval(timer);}, 120000);}, 500);
}

然后界面引用即可。

import { returnHistorySeat, scrollIntoViewHistory } from "@/libs/util";mounted() {// 参数  defaultPageSize可以不用传、，默认10条数据、如果非要查指定数量、可以传const paramsData = {params: this.params,indexVal: this.$route.params.indexVal,itemName: "item",defaultPageSize: 5,};// 调用returnHistorySeat(paramsData);this.getTransferFileList().then(() => {this.$nextTick(() => {//调用scrollIntoViewHistory(paramsData);});});},

ok、简洁多了。

vue移动端项目返回上次浏览位置相关推荐

2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目一.Vue项目搭建二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...
vue移动端项目实现定位
vue移动端项目实现定位腾讯地图官方地址 <template><div><div id="container&q ...
Adobe Acrobat DC 设置保存上次浏览位置
Adobe Acrobat DC 设置保存上次浏览位置当我们使用Adobe Acrobat DC浏览pdf文件时,浏览到一个位置,当关闭再打开时,又从第一页开始,不会保存我们上次浏览位置首先选择我 ...
Vue 移动端项目创建
前言移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
vue移动端项目实现真机调试
在vue移动端项目中,我们可以通过真机调试来更好的看到项目实际运行在移动端的效果. 下面就来介绍一下实现的方法: 1.使手机与电脑连接在同一个wifi下 2.修改vue.config.js文件配置将 ...
vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...

vue移动端项目返回上次浏览位置

vue移动端项目返回上次浏览位置相关推荐

最新文章

热门文章