vant3+ts+pinia tab选项卡列表页面点击进详情，详情页返回tab高亮在原位置，刷新高亮默认在第一项

最新推荐文章于 2024-05-03 21:05:41 发布
最新推荐文章于 2024-05-03 21:05:41 发布
阅读量630 收藏
点赞数 2
分类专栏： vue3+ts vant 保存代码 文章标签： 前端 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42180156/article/details/125202555
版权
保存代码 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
vue3+ts
6 篇文章 0 订阅
订阅专栏
vant
2 篇文章 0 订阅
订阅专栏

主要实现逻辑就是在vuex里面存一个变量，用来判断是详情还是列表页面

在点击详情的时候，把tab存进去

在onMounted加载的时候从vuex 里面取出来， 在setup 里面先存0，下面的判断就会走else

点击头部左按钮返回的时候给置为true

 

 

热忱学习
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript
02-08
该架构已踩过大部分坑，文章地址：https://blog.csdn.net/randy521520/article/details/136151322 在使用该架构前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite、vue3和typescript，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配等功能 vue3：https://cn.vuejs.org/ vant：https://vant-contrib.gitee.io/vant/#/zh-CN axios：https://www.axios-http.cn/docs/api_intro pinia：https://pinia.vuejs.org/zh/ sass：https://blog.csdn.net/randy521520/article/details/131242242 typescript：https://blog.csdn.net/randy521520/article/details/130425863
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
01-21
template里面: <!-- tab切换star --> 产品特点 投保须知 理赔流程 <!-- 切换内容star --
Vue3 + vant + Tab组件动态传递实现选项卡切换
qq_51463650的博客
02-27 684
Vue3使用vant框架，使用选项卡组件Tab 标签页，用于在不同的内容区域之间进行切换。并动态传递active等于2，使得“已收货”亮起。
vant中 tab栏遇到的坑 van-tabs。
热门推荐
柠檬不萌只是酸i
05-27 1万+
话不多说，先看下问题描述： 我的需求：点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tablan高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时.
vant/vue ——列表跳转到指定详情页获取数据的方法
NanChen的博客
12-16 3516
在原有的列表项中添加点击事件 新建一个路由页面（detail.vue）并配置好路径 在 有列表的页面中添加方法，并通过this.$router.push进行传参 navClick(index) { this.$router.push({ path: "/detail", query: { detail: JSON.stringify(this.list[index]), }, }); }, .
van-tabbar默认选中失效的问题解决方法
huangzhin的博客
05-20 4202
最近写h5项目时初始进入项目时发现van-tabbar的默认选中会失效（全部均未选中），如下图所示 相关代码： <template> <div id="app"> <router-view /> <van-tabbar v-model="active" route v-show="routerName=='study'||routerName=='message'||routerName=='my'"> <va.
html+vant 信息卡片
weixin_65635437的博客
05-22 370
html+vant 信息卡片
Vue/Vant——商品详情页中的弹窗选项卡
NanChen的博客
12-28 1209
这里整理一下思路，首先布局一下图片，其次去写按钮的样式，并把获取到的价格以及名称放在图片又边的位置最后计算购买数量以及限购条件 这里主要说一下按钮部分怎么去写，效果大概如下 首先需要准备一个数组里面包含俩对象 selects代表一个数组里面包含selectdd用来判断颜色，list列表中放两个按钮名称 selects: [ { title: "颜色", selected: 0, list: [ ...
使用vue+vant实现移动端开发，页面跳转后再回退到原来页面的浏览位置
weixin_38423249的博客
04-02 8228
场景：使用vue+vant做移动端开发，当打开a页面浏览到某个位置，点击跳转到b页面，然后再后退回a页面浏览的那个位置。 解决办法：使用store存储滚动条的位置。 store存储setScrollY的高度，代码如下： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = ne...
JS 之 cookie + localStorage 实践记录---实现：多选项卡网页，在刷新页面后，显示刷新前打开的选项卡
NRGAGA的专栏
06-07 823
要实现的功能是这样： 1、一个后台管理系统，有多个选项卡页面，当打开多个页面时，刷新浏览器之后，除了主页面，其他页面一律消失 2、需要的效果：当打开多个页面时，刷新浏览器之后，显示 主页面 和 上一次打开的最后一个页面 ===============分割线================ 思路：需要在前端实时存储最后一个打开的选项卡。在JS 内部存储肯定不行，一旦刷新所有变量值都...
选项卡 跳转到另外一个页面 再返回 保持原来的点击
A123ppleQueen的博客
10-26 1623
111111111111111111111111
类肯德基自助点餐系统01(Vue3.2 + Vite + TS + Vant + Pinia + MongDB）Vue H5项目
03-04
2、使用的技术栈为Vue3.2+Vite+TS+Vant+Pinia+MongoDB； 3、0.1.0版本已成功搭建Less、Vant、vw适配方案、Vue Rotuer、Pinia和Axios； 4、项目在gitee同步更新，请点个star：https://gitee.com/airheaven/kfg-vue ...
vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass
02-08
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite和vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理持久化储存等功能 vue3：...
类肯德基自助点餐系统02 - 页面布局(Vue3.2 + Vite + TS + Vant + Pinia + MongoDB）
03-15
2、使用的技术栈为Vue3.2+Vite+TS+Vant+Pinia+MongoDB； 3、项目正在gitee同步更新，请点个star：https://gitee.com/airheaven/kfg-vue 使用方法： 1、解压文件包，放入VSCode； 2、终端cd进入项目，使用npm ...
课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip
11-19
课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+pinia+vant的h5在线医疗问诊项目源码.zip课程设计-基于vue3+ts+...
element-ui的bug记录
nick_zhang的博客
04-29 504
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1398
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
最新发布
前端开发博客
05-03 1014
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 296
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vite2+vue2+vant2+ts
08-29
3. Vant 2：Vant 是一个基于 Vue 2 的移动端组件库，提供了丰富的 UI 组件，可以帮助你快速搭建移动端应用。Vant 2 是 Vant 的旧版本，同样有很多项目在使用它。 4. TS：TS 是 TypeScript 的简写，是一种由微软开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值