一、利用vuex在store/index.js中

记录滚动条历史高度
记录列表页分页页数

let store = new Vuex.Store({state: {myHistroy: {pageNum: 1, // 列表页分页页数scrollTop: 0， // 滚动条历史高度},},mutations: {MYHISTROY: (state, myHistroy) => {state.myHistroy= myHistroy;},},

二、在my/index.vue中

1、HTML结构

根据ref获取元素回到滚动条记录历史高度
注：该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度

  <ul class="my_list" ref="my_list" @scroll="scrollEvent"><li v-for="(item, index) in myList" :key="item.id"></li></ul>

2.滚动加载分页方法以及所需变量配置

  data() {return {isUpdate: true, // 是否到底-最后一页filter: {count: 10, // 页大小page: 1, // 当前页params: {status: "0"， // 额外传参 }},myList: [], // 列表数据集合total: 0, // 一共有多少条数据scrollTop: 0， // 滚动条高度}},// 离开当前页面时触发的卫士beforeRouteLeave(to,from,next) {if(to.path == "/order/details") {this.$store.state.myHistroy.pageNum = this.filter.page;this.$store.state.myHistroy.scrollTop = this.scrollTop;}next()},// 进入当前页面时触发的卫士beforeRouteEnter(to,from,next) {next(vm => {//因为当钩子执行前，组件实例还没被创建// vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。if(from.path !== "/order/details"){vm.$store.state.myHistroy.pageNum = 1;vm.$store.state.myHistroy.scrollTop = 0;} else {}})},mounted() {this.loadData();},methods: {// 首次加载 loadData() {if(this.$store.state.myHistroy.pageNum > this.filter.page) {this.filter.count = Number(this.filter.count*this.$store.state.myHistroy.pageNum);}let data = {count: this.filter.count, // 页大小page: this.filter.page, // 当前页params: {status: this.filter.params.status}}api.list(data).then(res => {if(res.status == 0 && res.data.results.length != 0){this.myList= res.data.results;this.total = res.data.count;if(this.$store.state.myHistroy.pageNum > this.filter.page) {this.filter.count = 10;this.filter.page = this.$store.state.myHistroy.pageNum;setTimeout(() => {this.$refs.my_list.scrollTo(0, this.$store.state.myHistroy.scrollTop);}, 1000)}}}).catch(() => {});},// 下拉数据更新加载 updateData() {let data = {count: this.filter.count, // 页大小page: this.filter.page, // 当前页params: {status: this.filter.params.status}}api.list(data).then(res => {if(res.status == 0 && res.data.results.length != 0){var myList = this.myList;res.data.results.forEach(function (item){myList.push(item);})this.myList = myList;this.total = res.data.count;} else {this.filter.page -= 1;if(res.data.results.length == 0) {this.isUpdate = false;this.$message.warning("到底了");} else {this.$message.error("操作失败");}}}).catch(() => {this.filter.page -= 1;this.$message.error("操作失败");});},// 列表滚动事件scrollEvent (e) {this.scrollTop = e.srcElement.scrollTop;if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {if(this.isUpdate) {this.filter.page += 1;this.updateData();} else {this.$message.warning("到底了");}}},}

3.列表样式

  my_list{height: 100vh; // 设置固定高度overflow: scroll;li {background-color: #ffffff;margin-bottom: 0.20rem;}}

VUE 列表页跳转到详情页，点击返回上一页，回到原来的位置相关推荐

vue中如何点击返回上一页，vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
Antd的Table表中，对最后一页数据进行全部删除后，自动返回上一页的数据
问:Antd的Table表中,对最后一页数据进行全部删除后,如何自动回到上一页? 浅浅的解析一下: 我所遇到的问题就是:(表中有11页的数据,一页10条)当删除最后一页的全部数据的时候页码自动跳到了上 ...
uniapp点击返回上一页按钮弹出提示框是否确认保存信息
点击按钮时弹出提示框判断是否需要保存代码 data() {return {flag: true //是否弹出返回提示框 } }, onBackPress() {if (this.flag) {uni ...
uniapp返回上一页携带参数,两种方法，实测有效
方法一: pages/pre/pre.vue <template><view><view>返回的数据为:</view><view>id: { ...
vue 跳转路由后返回上一页还是当前页面，但是路由地址有改变（已解决）
问题描述: 在开发vue项目的时候,涉及到路由跳转,前面的一顿操作配置路由的都很舒畅,跳转返回啥的都没问题.问题是啥呢,我在做个有视频播放的页面的时候,由于代码是参考别人的(狗头),导致在首页点击跳转 ...
vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
vue如何返回上一页效果
如何通过点击的方式控制当前页返回到上一个路由页面: 1.在当前页面添加返回按钮 <div style="text-align: center"><el-butto ...
uniapp返回上一页并传递参数
说是传递参数,实际是在你返回之前先修改了上一页的data里面的数据再进行返回上一页的操作. // 获取所有页面栈实例列表 let pages = getCurrentPages(); // 当前页页面 ...

VUE 列表页跳转到详情页，点击返回上一页，回到原来的位置

一、利用vuex在store/index.js中

二、在my/index.vue中

VUE 列表页跳转到详情页，点击返回上一页，回到原来的位置相关推荐

最新文章

热门文章