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

最新推荐文章于 2024-07-20 16:46:53 发布
最新推荐文章于 2024-07-20 16:46:53 发布
阅读量2k 收藏 8
点赞数 4
文章标签： vue.js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tendernessxy/article/details/115127001
版权

实现这样的效果：

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

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

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

(1).created(): 在创建vue对象时，当html渲染之前就触发;
	but 全局 vue.js 不强制刷新或者重启时只创建一次,
	也就是说, created
最低0.47元/天 解锁文章
新宇最优秀
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js页面跳转及自动向表格添加数据
renran6的博客
01-22 527
document.getElementById('comment').innerHTML = '请输入用户名';document.getElementById('comment').innerHTML = '请输入密码';document.getElementById('comment').innerHTML = '请输入用户名';document.getElementById('comment').innerHTML = '请输入密码';
利用webview 内嵌实现小程序，h5 ，app 页面跳转和数据通讯，附带实现pdf文件的预览（兼容ios和安卓）
qq_69892545的博客
09-11 2180
2、在小程序中打开H5页面时，是使用微信内置浏览器打开的；所以最常见的问题是，页面打开后，微信内置浏览器的缓存清除不掉，导致小程序打开H5页面内容不更新。1、小程序通过webview打开H5页面，需要配置业务域名，需要在小程序公众平台配置业务域名。2.bindmessage 可以实现网页端和小程序之间通讯， 但只在特定时机触发。这样就可以看到我们从小程序跳转到了h5页面并成功传递和接受了数据。在小程序中一般通过webview打开H5页面。会自动铺满整个小程序页面，网页端向小程序端传递消息。
（带效果动图）H5在详细页点返回，返回时列表页停留在原来的位置
坐等夕阳落time的博客
12-10 3688
H5返回时不刷新页面保持在原来的位置
html5页面表格固定列与表格内数据跳转功能
09-27
html5表格引用了amazeui框架的css样式，固定列问题就有点问题，后来引用了tablefreeze的工具，可顺利完成固定列滑动。关于表格内数据跳转运用了location。href="##"跳转，如果要传参数可在后面加上"?a=1"，通过中间java 代码传递。
【web前端基础 | H5】HTML标签（下）表格，列表，表单
小赵不忙的博客
10-14 881
思维导图 一：表格标签 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 组成 <table> <tr> <caption>表格标题</caption> </tr> <tr> <th&
前后端分离的web项目—前端实现页面跳转、渲染表格、携带参数的页面跳转
Arela651的博客
04-05 3958
功能一：简单的页面间跳转 使用标签实现页面简单的页面跳转。 <router-link to="/register"> <el-button >register</el-button> </router-link> 实现效果： 功能二：接受后端传来的数据并将其渲染出来 使用el-table组件渲染列表。 定义函数用来发送请求与接收返回数据。 <template> this is home page! &
table表格的使用(动态数据展示)
weixin_34138377的博客
09-11 6737
# table表格的使用(动态数据展示) ## 第一种方式 <el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount"> <el-table-column :label="head" :prop="head" v-for="(head, inde...
h5下拉刷新上拉加载滚动条位置
12-21
2. **返回列表时滚动到离开时的位置**：当用户在浏览一个长列表，比如商品列表或者文章列表，他们可能会滚动到列表的某个位置，然后点击一个链接跳转到其他页面。如果他们在完成操作后返回原列表，理想情况下，页面...
vue中解决微信html5原生ios虚拟键返回不刷新问题
01-18
做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会...
解决微信授权成功后点击按返回键出现空白页和报错的问题
11-20
微信授权我是 在index.vue做的授权，是一个空白页，因为授权需要回调所以这个页面会刷新两次，当我们授权成功进入主页面后，点击返回键或者点击手机的物理返回键，因为浏览器history机制，按物理返回或者返回肯定是...
移动端h5 商品列表 点击加入购物车动画
12-14
移动端h5 商品列表点击，飞入页面固定位置。数据结构采用jquery，vue。
基于uniapp微信小程序我的钱包页面
03-26
例如，点击充值按钮可以跳转到充值详情页，点击交易记录可进入交易详情页。 7. **微信小程序特有功能**：利用uniapp的微信小程序适配层，可以调用微信小程序的原生能力，如微信支付（wx.requestPayment）等，实现更...
vue-react-h5实战遇到的问题.docx
04-17
在实际开发Vue、React和H5项目时，优化是提高性能的关键。一些常见的优化策略包括： 1. **减少合并请求**：通过合并CSS和JavaScript文件，使用Webpack等构建工具，可以减少网络请求次数，从而提高加载速度。 2. **...
datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-发布活动界面实操07...
weixin_35348635的博客
12-27 146
欢迎来到人人都可写代码，大家好，我是杨晓华，今天我们的课程内容是，项目实操，开发一个发布活动界面的H5。这是要实现的H5发布活动界面展示效果，下面就是教大家如何制作的步骤：1、在views的项目smart-zgw目录下，新建fa-bu.vue文件。这个文件由三部分style、template、script组成。stytle用于绑定样式、template用于设计标签界面、script用...
Vue 详情页返回列表页，不刷新页面，并且保留列表页原来滚动条所在位置
沐枫
12-24 7382
前言： 最近公司有个移动端H5的项目，是前后端分离的，所以前端就Vue + Vux来做，项目是用vue-cli3生成的，其中就有这样的一个需求，在新闻列表页中向下滑动后，随别打开一个新闻，进入该新闻的详情页面，当看完后，从详情页返回到新闻列表页。这时，列表页重新请求接口数据，重新渲染DOM，而且滚动条也回到了最顶上的第1个新闻了。这样不仅性能不好，还会影响用户的体验效果。 问题分析： ...
h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
热门推荐
szl199107101035的博客
08-08 1万+
最近几天能研究了一下客户端的缓存以及cookie的用法。 客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图： 缓存添加成功。
H5 本地存储localStorage的使用（返回前一页浏览的历史位置）
weixin_30877181的博客
03-27 482
最近在做微信网页优化，,发现在微信中浏览列表的时候滑到了一个中间的位置，点击了某一个详情，可是从详情页返回之后发现列表又重新开始返回到了第一个，列表的数据下拉通过ajax加载数据，从详情页返回的时候页面进行了刷新，原来的数据被刷掉了，这几天百度了很多，刚开始看着很懵逼，询问了一些大佬，参考了百度到的东西，慢慢的摸索，终于解决了这个问题，记录一下，方便以后使用。代码如下： HTML页面： ...
PC、H5页面从详情页跳回列表页保留滚动条位置
yuhong's blog
03-25 873
文章目录一、先决条件一、两种情况二、代码情况一情况二1.设置keep-alive2.记录滚动条位置3.获取滚动条位置三、核心代码四、属性 一、先决条件 1.vue框架 2.使用keep-alive keep-alive的vue官网链接 一、两种情况 1.第一种情况：从列表跳转到详情，详情页只供查看，不需要编辑，因此跳转回去的时候不需要更新页面数据 2.第二种情况：从列表跳转到详情，详情页需要编辑，因此跳转回去的时候需要更新页面数据 二、代码 情况一 1.设置 keep-alive 2.从列表页跳
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 994
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
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> ``` 注意，以上代码仅为示例，具体实现可能需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值