Vue项目中常见问题(31)跳转商品详情页滚动行为

最新推荐文章于 2024-07-11 15:03:42 发布
最新推荐文章于 2024-07-11 15:03:42 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： vue前台管理项目 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124869265
版权
本文介绍了在Vue项目中，如何处理从搜索页面跳转到商品详情页时的滚动行为，确保每次跳转都滚动到顶部。首先，创建Detail组件并注册为路由组件，然后在Search页面点击商品图片时传递商品ID。当发现跳转总是到页面底部时，通过查阅Vue Router官方文档，了解到可以通过路由解决滚动条问题。为避免router/index.js内容混乱，新建了routes.js文件来管理路由配置，并实现了跳转至详情页顶部的效果。
摘要由CSDN通过智能技术生成

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

 1.在pages下创建文件件Detail组件,把静态页面写完

 2.Detail组件注册为路由组件

 3.业务需求

 3.1.占位

 3. 2.找到结构

 3.3.跳转加传参

 4.发现问题

4.1 实现效果分析:

4.2我们可以在官网中看到:滚动行为 | Vue Router

4.3由于路由配置信息过多,为了不让router/index.js中内容过多,看起来乱

4.4实现跳转滚动到顶部

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

开发某一个产品的详情页面步骤

其实还是和以前一样的步骤

1:静态组件

2:发请求

3:vuex

4:动态展示组件

1.在pages下创建文件件Detail组件,把静态页面写完

 

2.Detail组件注册为路由组件

在router/index.js中把Detail注册为路由组件

 

 注册成功以后,我们可以手动在地址栏输入http://localhost:8080/#/detail

就可以看见我们的详情页的静态组件的页面

当然这些数据都是假的

 3.业务需求

1.我们在搜索Search页面点击商品图片的时候,我们应该要跳转到详情页面

2.我们在搜索Search页面点击商品图片的时候,我们需要告诉详情页Detail,

最低0.47元/天 解锁文章
学无止境QAQ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2电商前台项目（四）：完成Detail详情页模块业务
weixin_42044763的博客
09-21 2394
请求数据是异步操作，所以`getters`中的数据`skuInfo`没有读到的话，会先返回空对象，然后去读取空对象身上的属性，肯定会报错，但是后边数据请求回来了，又会重新渲染重新响应，所以页面显示正常，但是控制台会先报一个错，解决办法还是加个`逻辑或`把它置空一下子 `|| []`
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
vue项目中点击商品跳转详情页
violetta521的博客
11-12 3680
路由配置 path: "/detail/:goods_id", component: () => import("../views/detail/detail.vue") 配置详情页 <!-- detail --> <template> <div class="detail"> <!-- 详情页轮播 mint-ui --> <div class="swipe"> <mt-swi
vue 实现点击跳转页面
最新发布
qq_33240556的博客
07-11 1480
在Vue中实现点击跳转页面，通常有两种常见的方式：使用组件和编程式导航。下面分别介绍这两种方法。
vue3项目实战-第五章-商品详情页（商品热榜区/图片预览/全局组件统一注册）
m0_62300955的博客
03-13 1594
商品热榜区/图片预览/全局组件统一注册
vue 点击商品列表跳转详情在网页中新打开一个页面
weixin_45865992的博客
06-05 521
【代码】vue 点击商品列表跳转详情在网页中新打开一个页面。
vue中跳转到详情页的两种方法
m0_65792710的博客
01-16 4553
vue中跳转到详情页的两种方法
vue中进入详情页记住滚动位置的方法(keep-alive)
01-19
> 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置，这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: ‘/scrollDemo', name: ‘scrollDemo', meta: { keepAlive: ...
vue 页面跳转404_Vue 项目一些常见问题的解决方案
weixin_39875167的博客
11-20 8172
本文已获得原作者的独家授权，有想转载的朋友们可以在后台联系我申请开白哦！PS：欢迎掘友们像我投稿哦，被采用的文章还可以送你掘金精美周边！有一些问题不限于 Vue，还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出...
vue中如何点击列表页跳转到详情页，并保存当前点击的位置，返回时仍是当前位置
weixin_57157114的博客
09-10 2472
第一步：在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 (to
vue 列表页跳转详情页获取id以及详情页通过id获取数据
10-17
主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue如何通过id从列表页跳转到对应的详情页
08-27
主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下
仿淘宝商品详情页(上拉阻尼效果以及第二页View Page滑动)
09-14
仿淘宝商品详情页(上拉阻尼效果以及第二页View Page滑动)
搭建模仿跨境电商网站vue-router路由跳转
10-11
包含十几个网页，主要就是练习vue-router简单操作，实现基本跳转，node_modules文件比较大，没有在压缩包里，可以在命令行“nmp i”安装一下,自我感觉写的挺好的，哈哈，大神请绕路！
【vue】仿淘宝商品详情---实现滚动显隐标签页&锚点导航
一位前行者的博客
11-08 1901
封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；在父组件定义一个数组作为右侧导航栏的数据；由于左侧区域的某一块内容没有数据时，其对应的导航项不显示； 要给每一块的内容最外层绑定ref，是为了获取该dom元素，通过点击导航栏某一项时，让页面可以滚动到对应的元素内容； 导航在抽屉里做的，给最外层绑定ref=“drawer”，可以获取到当前页面最外层的dom元素，根据最外层容器的dom元素来获取滚动高度； 组件要接收导航栏数据、接收当前是否是抽屉(默认为抽屉，传false为普通正常页...
s-shop点击商品进入商品详情页（含轮播图），使用vue-router传递商品id，用vant-ui、element-ui 组件实现进入相应的商品详情页（客户端显示）
qq_69635978的博客
10-13 763
本文实现的是商品的详情页面，包括了含缩略图的轮播图、动态绑定样式、和页面的渲染。主要用到的是Vue.js和element-ui、vant-ui。也介绍了在vue中何如使用$router传递参（即如何从商品列表页面跳转到商品详情页）
石头的实习之路3——Vue2点击产品跳转详情页的实现
qq_44462050的博客
04-27 3583
Vue2点击产品跳转详情页的实现
vue点击跳转到详情页
热门推荐
qq_43579525的博客
05-21 2万+
1商品组件页面GoodsInfo.vue(点击该组件跳转到详情页) <template> <div class="goods-info" @click="goGoodsPage()"> <div class="goods-image"> <img v-lazy="goodsImage"> ...
vue3、ts 项目中，div容器的滚动条，横向滑动条，当滑到最右边时，在滑动跳转到详情页
06-03
可以通过监听滚动事件来判断滚动条是否到达最右边，然后通过编程方式来触发页面跳转。具体实现可以参考以下代码： 1. 在 template 中添加一个 div 容器，并给它添加一个 ref： ```html <div ref="scrollContainer" class="scroll-container"> <!-- 省略内容 --> </div> ``` 2. 在 script 中监听 scroll 事件，并计算滚动条是否到达最右边： ```javascript <script> import { defineComponent } from 'vue'; export default defineComponent({ mounted() { const container = this.$refs.scrollContainer; container.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(event) { const container = event.target; const scrollWidth = container.scrollWidth; // 容器的滚动宽度 const scrollLeft = container.scrollLeft; // 滚动条的左侧距离容器左侧的距离 const clientWidth = container.clientWidth; // 容器的可见宽度 if (scrollWidth - scrollLeft === clientWidth) { // 滚动条到达最右侧 this.jumpToDetailPage(); } }, jumpToDetailPage() { // 实现跳转到详情页的逻辑 }, }, }); </script> ``` 3. 在 jumpToDetailPage 方法中实现跳转到详情页的逻辑，具体实现可以根据你的具体需求来编写，例如： ```javascript jumpToDetailPage() { // 获取当前路由信息 const currentRoute = this.$router.currentRoute.value; // 构造跳转的路由信息 const detailRoute = { name: 'DetailPage', params: { id: currentRoute.params.id, }, }; // 调用路由的 push 方法进行跳转 this.$router.push(detailRoute); }, ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值