vue H5列表页面点击跳转看详情返回列表页保持在当前位置

最新推荐文章于 2024-07-23 15:45:06 发布

新宇最优秀

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量2k

点赞数 4

文章标签： vue.js javascript css3

本文链接：https://blog.csdn.net/tendernessxy/article/details/115127001

版权

实现这样的效果：

（ 列表点击跳转到详情页  ）
	（ 详情页面返回到列表页 ）
		（ 同时停留在刚才点击的位置 ）

最后的详情页由于网络原因请忽略在这里插入图片描述

首先区分下created（）和 actived（）的区别：

(1).created(): 在创建vue对象时，当html渲染之前就触发;
	but 全局 vue.js 不强制刷新或者重启时只创建一次,
	也就是说, created

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

新宇最优秀

关注关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
vue H5列表页面点击跳转看详情返回列表页保持在当前位置

vue H5列表页面点击跳转看详情返回列表页保持在当前位置
复制链接

扫一扫

vue跳转下个页面关闭当前页面_vue 刷新当前页面或者跳转页面时候刷新

weixin_39584549的博客

12-19

6967

为什么会有这篇文章1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载，但是页面闪烁，体验不好解决办法方式一先新建一个空白页面，先跳到空白页面，然后再从空白页面跳转回来 history.go(-1) 这样的方式在我这里测试不成功方式二直接刷新...

利用webview 内嵌实现小程序，h5 ，app 页面跳转和数据通讯，附带实现pdf文件的预览（兼容ios和安卓）

qq_69892545的博客

09-11

2181

2、在小程序中打开H5页面时，是使用微信内置浏览器打开的；所以最常见的问题是，页面打开后，微信内置浏览器的缓存清除不掉，导致小程序打开H5页面内容不更新。1、小程序通过webview打开H5页面，需要配置业务域名，需要在小程序公众平台配置业务域名。2.bindmessage 可以实现网页端和小程序之间通讯，但只在特定时机触发。这样就可以看到我们从小程序跳转到了h5页面并成功传递和接受了数据。在小程序中一般通过webview打开H5页面。会自动铺满整个小程序页面，网页端向小程序端传递消息。

参与评论您还未登录，请先登录后发表或查看评论

（带效果动图）H5在详细页点返回，返回时列表页停留在原来的位置

坐等夕阳落time的博客

12-10

3702

H5返回时不刷新页面保持在原来的位置

vue3项目页面跳转之后，退回到原页面点击位置

amber_1210的博客

06-14

330

获取多条数据列表，点击其中某条数据跳转到详情页面。再从详情页面退回到数据列表页面，并回到点击跳转处。1、在app.vue页面路由出口位置使用keep-alive内置组件。注意：include里面写的是组件的名称，而并非是组件的路由名称。2、在list.vue页面中定义跳转前的scrollTop值。1、在app.vue页面采用keep-alive内置组件。2、在跳转之前获取到点击位置处的高度。3、在页面加载时，拿到高度赋值即可。获取点击处的位置高度。

vue H5列表页面跳转详情返回列表页保持在当前位置

麋鹿的鹿

12-08

1545

需求：列表点击跳转到详情页，详情页面返回到列表页，同时停留在刚才点击的位置。实现方式 Keep-alive。

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法

大哼的小世界

08-22

4161

vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> <div id="app"> <keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &lt

Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置

沐枫

12-24

7383

前言：最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。问题分析： ...

vue从其它页面返回_vue---详细页点返回列表页，停留在原先位置

weixin_29927289的博客

01-12

762

列表页面，点击进入到详情页面，在详情页面向下滑动时，滚动条变化，document.documentElement.scrollTop变化，点击返回按钮时，列表页面的document.documentElement.scrollTop自动定位到了详情页面的位置。不止H5,PC端开发中也遇到过此类问题。页面跳转后，回到此页面时，页面不刷新概述问题：页面跳转后，回到此页面时，页面不刷新H5在详细页点返回...

Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据

w15635748705的博客

04-16

9039

这个问题我最后还是借鉴了大佬的经验，还是大佬牛直接上教程首先在router.js中的列表页中添加缓存的变量： { path: '/', name: 'home', // 列表页 component: home, meta: { keepAlive: true //此页面需要缓存 } 在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加） { path: '/notedetail', name: 'noteDetail',

vue中如何点击列表页跳转到详情页，并保存当前点击的位置，返回时仍是当前位置

weixin_58495461的博客

08-29

1428

第一步：在router文件里面的index.js写入 { path: ‘/’, name: ‘Home’, component: Home, meta: { keepAlive: true //需要缓存 } } 上面是跳转路由，主要是把meta添加到里面第二步：还是在这个文件里面加入 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior

h5下拉刷新上拉加载滚动条位置

12-21

2. **返回列表时滚动到离开时的位置**：当用户在浏览一个长列表，比如商品列表或者文章列表，他们可能会滚动到列表的某个位置，然后点击一个链接跳转到其他页面。如果他们在完成操作后返回原列表，理想情况下，页面...

vue中解决微信html5原生ios虚拟键返回不刷新问题

01-18

做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会...

解决微信授权成功后点击按返回键出现空白页和报错的问题

11-20

微信授权我是在index.vue做的授权，是一个空白页，因为授权需要回调所以这个页面会刷新两次，当我们授权成功进入主页面后，点击返回键或者点击手机的物理返回键，因为浏览器history机制，按物理返回或者返回肯定是...

基于uniapp微信小程序我的钱包页面

03-26

例如，点击充值按钮可以跳转到充值详情页，点击交易记录可进入交易详情页。 7. **微信小程序特有功能**：利用uniapp的微信小程序适配层，可以调用微信小程序的原生能力，如微信支付（wx.requestPayment）等，实现更...

vue-react-h5实战遇到的问题.docx

04-17

在实际开发Vue、React和H5项目时，优化是提高性能的关键。一些常见的优化策略包括： 1. **减少合并请求**：通过合并CSS和JavaScript文件，使用Webpack等构建工具，可以减少网络请求次数，从而提高加载速度。 2. **...

Python Formulas模型以JSON格式文件导出导入

最新发布

Humbunklung的专栏

07-23

353

Python Formulas库，JSON格式导出导入。

Vue使用FullCalendar实现日历/周历/月历

_小郑有点困了的博客

07-23

317

需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。

【vueUse库Time模块各函数简介及使用方法--全篇】

xiejunlan的博客

07-23

749

vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。

vue H5列表页面点击跳转看详情返回列表页保持在当前位置，代码如何实现

04-28

你可以使用 `keep-alive` 组件来缓存列表页，以保持其状态不变。然后使用路由参数来传递当前位置的信息。在跳转到详情页时，将当前位置信息作为参数传递给详情页，以便在返回时能够准确地回到原来的位置。以下是示例代码：列表页： ```html <template> <div> <keep-alive> <ul> <li v-for="item in items" :key="item.id"> <router-link :to="{ name: 'detail', params: { id: item.id, position: getPosition() } }">{{ item.title }}</router-link> </li> </ul> </keep-alive> </div> </template> <script> export default { data() { return { items: [...], // 列表数据 scrollTop: 0 // 当前滚动位置 } }, methods: { getPosition() { // 获取当前滚动位置 return this.$refs.list.scrollTop } }, mounted() { // 监听滚动事件，更新滚动位置 this.$refs.list.addEventListener('scroll', () => { this.scrollTop = this.$refs.list.scrollTop }) } } </script> ``` 详情页： ```html <template> <div> <h1>{{ item.title }}</h1> <p>{{ item.content }}</p> <button @click="goBack">返回</button> </div> </template> <script> export default { data() { return { item: {}, // 详情数据 position: 0 // 列表页滚动位置 } }, methods: { goBack() { // 返回列表页，并滚动到原来的位置 this.$router.back() setTimeout(() => { this.$refs.list.scrollTop = this.position }, 0) } }, mounted() { // 获取详情数据 const id = this.$route.params.id this.item = this.items.find(item => item.id === id) // 获取列表页滚动位置 this.position = this.$route.params.position } } </script> ``` 注意，以上代码仅为示例，具体实现可能需要根据实际情况进行调整。

vue H5列表页面 点击跳转看详情 返回列表页保持在当前位置

vue H5列表页面点击跳转看详情返回列表页保持在当前位置