vue3使用vant4的列表vant-list点击进入详情自动滚动到对应位置,踩坑日记(一天半的踩坑经历)

1.路由添加keepAlive

 <!-- Vue3缓存组件,写法和Vue2不一样--><router-view v-slot="{ Component }"><keep-alive><component :is="Component" v-if="$route.meta.keepAlive"/></keep-alive><component :is="Component" v-if="!$route.meta.keepAlive"/></router-view>

2.路由添加mate标识

 {path: "/user-manage", // 用户管理name: "user-manage",meta: {keepAlive: true, //此页面需要缓存isBack: false,scrollTop:0},component: () => import("../pages/user/index.vue"),},

3.在beforeRouteEnter里面给如果从详情页面返回meta.isBack改变值为true ps(beforeRouteEnter这个生命周期函数里滑动不生效需要在onActivated里面执行),(因为vu3 setup里面没有beforeRouteEnter)需要单独引入一个script,在onActivated生命周期函数里让页面滑动到指定位置(全部代码)

<template><div class="area-setting-list" ref="wrapper"><!-- 导航栏 --><TopMenu:titleText="state.menuText":backgroundColor="state.bgColor":pathName="state.pathName"></TopMenu><!-- 搜索框 --><van-sticky offset-top="44"><divclass="search-box":style="{ backgroundColor: state.backgroundColor }"><div><van-fieldv-model="state.queryType.keyword"left-icon="search"placeholder="请输入邮箱/手机号"@blur="init"@click-input="updataChange"/></div><div @click="state.show = true"></div></div></van-sticky><div class="device-list"><van-listv-model:loading="state.loading":finished="state.finished"finished-text="没有更多了"@load="onLoad"offset="100":immediate-check="false"><divclass="device-item"v-for="(item, index) in state.list":key="index"@click="goUserDetail(item)"><div class="first-item"><div><div class="first-item_light">{{ item.userIdentity?.value + index }}</div><div>账号: {{ item.account }}</div></div><div><van-switchv-model="item.checked"size="20px":loading="item.switchLoading"@click.stop="switchChange(item)"/></div></div><div class="second-item"><div>创建时间 : {{ item.createTime }}</div><div>{{ item.enableStatus?.value }}</div></div></div></van-list></div><div class="addBtn" @click="addUser">添加用户</div><!-- 筛选弹框 --><van-action-sheet v-model:show="state.show" title="筛选"><div class="pop-content"><div class="title">账户类型</div><div class="select-ite"><div class="active">电站业主<div class="select-bage"></div></div><div>经销商<div class="select-bage"></div></div><div>服务商<div class="select-bage"></div></div><div>安装商<div class="select-bage"></div></div></div><div class="title">创建时间</div><div class="select-time"><div @click="selectStartTime">{{state.queryType.startTime == ""? "开始时间": state.queryType.startTime}}</div><div>~</div><div @click="selectEndTime">{{state.queryType.endTime == ""? "结束时间": state.queryType.endTime}}</div></div><div class="select-btn"><div @click="restQuery">重置</div><div @click="getMoreQuery">确定</div></div></div></van-action-sheet><!-- 日期选择器 --><van-popupv-model:show="state.showPop"position="bottom"roundlabel="有效日期"custom-style="height: 50%;"@close="state.showPop = false"><van-date-pickertitle="选择日期":min-date="minDate":max-date="maxDate"@cancel="state.showPop = false"@confirm="selectTime"/></van-popup></div>
</template>
<script>
import { defineComponent } from "vue";export default defineComponent({beforeRouteEnter(to, from, next) {if (from.name === "edit-user") {to.meta.isBack = true;window.scrollTo({top: 300,behavior: "smooth", // 平滑滚动});console.log("beforeRouteEnter");console.log(from.meta);console.log(store.state.listHeight);console.log("beforeRouteEnter");} // 放行路由next();},
});
</script>
<script setup>
import daohang from "../../assets/daohang.png";
import {getCurrentInstance,onMounted,reactive,inject,ref,onActivated,onUnmounted,nextTick,watch,
} from "vue";
import TopMenu from "../../component/topMenu.vue";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import store from "@/store/index";const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const wrapper = ref(null);const state = reactive({menuText: "用户管理",pathName: "",bgColor: "transparent",activeColor: "#EA5514",backgroundColor: "#F9EBE5",loading: false,finished: false,list: [],pageNum: 1,backgroundColor: "transparent",checked: true,show: false,showPop: false,queryType: {endTime: "",keyword: "",startTime: "",},pageType: {pageIndex: 1,pageSize: 10,},currentScrollTop: 0,timeType: 0,
});
watch(() => state.queryType.keyword, // 要监听的响应式属性(newValue, oldValue) => {// 当属性值变化时,这个回调函数会被调用console.log(newValue);if (newValue == "") {init();}}
);
// 列表触底加载
const onLoad = () => {console.log("触底了");state.loading = false;state.pageType.pageIndex++;getList();
};// 监听页面滚动的方法
const doScroll = (event) => {console.log(window.scrollY);state.currentScrollTop = window.scrollY;if (window.scrollY > 20) {state.bgColor = "#D6E6F9";state.backgroundColor = "#D6E6F9";} else {state.bgColor = "transparent";state.backgroundColor = "transparent";}
};// 数据初始化
const init = () => {state.list = [];state.finished = false;state.pageType.pageIndex = 1;getList();
};
// 查询
const searchList = () => {state.pageType.pageIndex = 1;state.finished = false;state.list = [];getList();
};
const updataChange = (value) => {console.log(value);
};
// 查询用户列表
const getList = () => {state.loading = true;proxy.$H.post(proxy, proxy.$A.user.list, {data: state.queryType,page: state.pageType,}).then((res) => {let lists = res.data.data;state.loading = false;if (lists.length > 0) {for (let item of lists) {if (item.enableStatus.key == "ENABLE") {item.checked = true;} else {item.checked = false;}item.switchLoading = false;}}if (lists.length < 10) {state.finished = true;}state.list = state.list.concat(lists);console.log("ccccc");console.log(state.list);console.log("ccccc");});
};
// 启用禁用用户
const switchChange = (item) => {console.log(item);item.switchLoading = true;proxy.$H.post(proxy, proxy.$A.user.updateEnableStatus, {data: {key: item.id,value: item.checked ? "DISABLE" : "ENABLE",},}).then((res) => {item.switchLoading = false;init();}).catch((err) => {item.switchLoading = false;});
};
// 新增用户
const addUser = () => {console.log("点了新增用户");router.push("/add-user");
};// 用户详情
const goUserDetail = (item) => {// store.commit("setDetailFlag", true);console.log("点击了详情");store.commit("setListHeight", state.currentScrollTop);router.push({path:'/edit-user',query:{id:item.id}})};// 选择开始时间
const selectStartTime = () => {state.showPop = true;state.timeType = 0;
};// 选择结束时间
const selectEndTime = () => {state.showPop = true;state.timeType = 1;
};
// 时间picker触发的事件
const selectTime = (value) => {let time =value.selectedValues[0] +"-" +value.selectedValues[1] +"-" +value.selectedValues[2];console.log(time);if (state.timeType == 0) {state.queryType.startTime = time;} else {state.queryType.endTime = time;}state.showPop = false;
};
// 更多筛选点击确定
const getMoreQuery = () => {if (state.queryType.startTime != "") {if (state.queryType.endTime == "") {proxy.$U.errMsg("请选择结束时间");return;}}state.show = false;init();
};
// 重置查询条件
const restQuery = () => {state.queryType = {endTime: "",keyword: "",startTime: "",};
};
onMounted(() => {// 当天日期console.log("onMounted");// 监听页面滚动window.addEventListener("scroll", doScroll, true);
});
onUnmounted(() => {window.removeEventListener("scroll", doScroll);
});
onActivated(() => {console.log("onActivated");console.log(route.meta.isBack);console.log("onActivated");if (!route.meta.isBack) {// 不是从详情页面进来的就重新加载数据init();route.meta.isBack = false;}window.scrollTo({top: store.state.listHeight,behavior: "smooth", // 平滑滚动});
});
</script><style lang="less" scoped>
@import "./index.less";
.dialog-content {max-height: 60vh;overflow-y: scroll;border: 1px solid red;padding: 20px;.dia-cent {margin-bottom: 3px;}
}
</style>

在这里插入图片描述
注意点!!!!!!!
在这里插入图片描述
否则window.scrollTo()会不执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/37317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在MySQL中按字符串中的数字排序

在管理数据库时&#xff0c;我们经常遇到需要按嵌入在字符串中的数字进行排序的情况。这在实际应用中尤为常见&#xff0c;比如文件名、代码版本号等字段中通常包含数字&#xff0c;而这些数字往往是排序的关键。本文将详细介绍如何在MySQL中利用正则表达式提取字符串中的数字并…

Java家教系统小程序APP公众号h5源码

让学习更高效&#xff0c;更便捷 &#x1f31f; 引言&#xff1a;家教新选择&#xff0c;小程序来助力 在快节奏的现代生活中&#xff0c;家长们越来越注重孩子的教育问题。然而&#xff0c;如何为孩子找到一位合适的家教老师&#xff0c;成为了许多家长头疼的问题。现在&…

谷歌个人号,20人连续封测14天所需设备该怎么解决?

现在&#xff0c;在Google Play上架应用&#xff0c;对于大部分开发者来说&#xff0c;真的是不小的挑战&#xff0c;因为目前谷歌上架政策越来越严格了。特别是从2023年11月13日起&#xff0c;新政策要求个人开发者账号的应用必须经过20个独立用户连续14天的封闭测试&#xff…

【C语言】--分支和循环(1)

&#x1f37f;个人主页: 起名字真南 &#x1f9c7;个人专栏:【数据结构初阶】 【C语言】 目录 前言1 if 语句1.1 if1.2 else1.3 嵌套if1.4 悬空else 前言 C语言是结构化的程序设计语言&#xff0c;这里的结构指的是顺序结构、选择结构、循环结构。 我们可以用if、switch实现分支…

vue2实例实现一个初步的vuex

vue2实例实现一个初步的vuex 实现源码&#xff1a;vue2-review 1.App.vue 2.store目录下的index.js 3.效果 微信公众号&#xff1a;刺头拾年

扩展阅读:什么是中断

如果用一句话概括操作系统的原理,那就是:整个操作系统就是一个中断驱动的死循环,用最简单的代码解释如下: while(true){doNothing(); } 其他所有事情都是由操作系统提前注册的中断机制和其对应的中断处理函数完成的。我们点击一下鼠标,敲击一下键盘,执行一个程序,…

Spring MVC中的DispatcherServlet、HandlerMapping和ViewResolver的作用

在Spring MVC框架中&#xff0c;DispatcherServlet、HandlerMapping和ViewResolver是核心组件&#xff0c;它们各自承担着不同的角色和任务&#xff1a; 1.DispatcherServlet&#xff1a;它是Spring MVC生命周期中的前端控制器&#xff0c;负责接收HTTP请求并将它们分发给相应的…

5.x86游戏实战-CE定位基地址

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 上一个内容&#xff1a;4.x86游戏实战-人物状态标志位 上一个内容通过CE未知的初始值、未变动的数值、…

JVM相关总结

JVM的些许问题 1.JVM内存区域划分 2.JVM类加载过程 3.JVM的垃圾回收机制 1.JVM的内存区域划分 一个运行起来的Java进程就是一个JVM虚拟机,需要从操作系统申请一大片内存,就会把内存划分成几个区域,每个区域都有不同的作用 常见的面试题 2.JVM类加载过程 熟练背诵 ! ! !…

WordPress中文网址导航栏主题风格模版HaoWa

模板介绍 WordPress响应式网站中文网址导航栏主题风格模版HaoWa1.3.1源码 HaoWA主题风格除行为主体导航栏目录外&#xff0c;对主题风格需要的小控制模块都开展了敞开式的HTML在线编辑器方式的作用配备&#xff0c;另外预埋出默认设置的编码构造&#xff0c;便捷大伙儿在目前…

入门JavaWeb之 JDBC 连接数据库

JDBC&#xff1a;Java Database Connectivity&#xff0c;Java 数据库连接 需要 jar 包支持&#xff1a; java.sql javax.sql mysql-connector-java&#xff08;连接驱动&#xff0c;必须导入&#xff09; 在 MySQL 先建个 jdbc 数据库后 USE jdbc; 执行后再 CREATE TABLE…

15- 22题聚合函数 - 高频 SQL 50 题基础版

目录 1. 相关知识点2. 例子2.15 - 有趣的电影2.16 - 平均售价2.17 - 项目员工 I2.18 - 各赛事的用户注册率2.19 - 查询结果的质量和占比2.20 - 每月交易 I2.21 - 即时食物配送 II2.22 - 游戏玩法分析 IV 1. 相关知识点 函数 函数含义order by排序group by分组between 小值 an…

Chrome备份数据

Chrome备份数据 1、 导出谷歌浏览器里的历史记录 参考&#xff1a;https://blog.csdn.net/qq_32824605/article/details/127504219 在资源管理器中找到History文件&#xff0c;文件路径&#xff1a; C:\Users\你的电脑用户名\AppData\Local\Google\Chrome\User Data\Default …

堆排序思想分享

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

五、Pentium 微处理器保护模式存储管理,《微机系统》第一版,赵宏伟

一、分段存储管理 Pentium支持分段存储管理、分页存储管理和段页式存储管理。 1.1 分段存储管理的基本思想 一个程序由多个模块组成。 每一个模块都是一个特定功能的独立的程序段。 段式管理&#xff1a;把主存按段分配的存储管理方式。 程序模块→段→段描述符→段描述符…

【C++深度探索】继承机制详解(一)

hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1…

代码托管服务:GitHub、GitLab、Gitee

目录 引言GitHub&#xff1a;全球最大的代码托管平台概述功能特点适用场景 GitLab&#xff1a;一体化的开发平台概述功能特点适用场景 Gitee&#xff08;码云&#xff09;&#xff1a;中国本土化的代码托管服务概述功能特点适用场景 功能对比结论 引言 在现代软件开发中&#…

C++操作系列(一):MinGW环境安装与配置(无报错版)

本文选择MinGW作为安装对象。 1. 下载MinGW 进入官网&#xff1a;MinGW - Minimalist GNU for Windows download | SourceForge.net 点击File&#xff1a; 划到最下面&#xff1a; &#xfeff; Windows 64位系统下载seh结尾的安装包&#xff1a; 2. 安装MinGW 解压MinGW&am…

扛鼎中国AI搜索,天工凭什么?

人类的创作不会没有瓶颈&#xff0c;但AI的热度可不会消停。 大模型之战依旧精彩&#xff0c;OpenAI选择在Google前一天举行发布会&#xff0c;两家AI企业之间的拉扯赚足了热度。 反观国内&#xff0c;百模大战激发了大家对于科技变革的热切期盼&#xff0c;而如今行业已逐渐…

【操作系统期末速成】 EP01 | 学习笔记(基于五道口一只鸭)

文章目录 一、前言&#x1f680;&#x1f680;&#x1f680;二、正文&#xff1a;☀️☀️☀️1.1 考点一&#xff1a;操作系统的概率及特征 三、总结&#xff1a;&#x1f353;&#x1f353;&#x1f353; 一、前言&#x1f680;&#x1f680;&#x1f680; ☀️ 回报不在行动…