当前位置: 首页 > news >正文

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()会不执行

相关文章:

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

1.路由添加keepAlive <!-- Vue3缓存组件&#xff0c;写法和Vue2不一样--><router-view v-slot"{ Component }"><keep-alive><component :is"Component" v-if"$route.meta.keepAlive"/></keep-alive><component…...

Linux的fwrite函数

函数原型: 向文件fp中写入writeBuff里面的内容 int fwrite(void*buffer&#xff0c;intsize&#xff0c;intcount&#xff0c;FILE*fp) /* * description : 对已打开的流进行写入数据块 * param ‐ ptr &#xff1a;指向 数据块的指针 * param ‐ size &#xff1a;指定…...

python udsoncan 详解

python udsoncan 详解 udsoncan 是一个Python库&#xff0c;用于实现汽车统一诊断服务&#xff08;Unified Diagnostic Services&#xff0c;UDS&#xff09;协议。UDS是一种用于汽车诊断的标准化通信协议&#xff0c;它定义了一系列的服务和流程&#xff0c;用于ECU&#xff…...

基于自组织长短期记忆神经网络的时间序列预测(MATLAB)

LSTM是为了解决RNN 的梯度消失问题而诞生的特殊循环神经网络。该网络开发了一种异于普通神经元的节点结构&#xff0c;引入了3 个控制门的概念。该节点称为LSTM 单元。LSTM 神经网络避免了梯度消失的情况&#xff0c;能够记忆更长久的历史信息&#xff0c;更能有效地拟合长期时…...

240629_昇思学习打卡-Day11-Vision Transformer中的self-Attention

240629_昇思学习打卡-Day11-Transformer中的self-Attention 根据昇思课程顺序来看呢&#xff0c;今儿应该看Vision Transformer图像分类这里了&#xff0c;但是大概看了一下官方api&#xff0c;发现我还是太笨了&#xff0c;看不太明白。正巧昨天学SSD的时候不是参考了太阳花的…...

代码随想录-Day43

52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研究材料包括实验设备、文献资料和实验样本等…...

C++——探索智能指针的设计原理

前言: RAII是资源获得即初始化&#xff0c; 是一种利用对象生命周期来控制程序资源地手段。 智能指针是在对象构造时获取资源&#xff0c; 并且在对象的声明周期内控制资源&#xff0c; 最后在对象析构的时候释放资源。注意&#xff0c; 本篇文章参考——C 智能指针 - 全部用法…...

办公效率新高度:利用办公软件实现文件夹编号批量复制与移动,轻松管理文件

在数字化时代&#xff0c;我们的工作和生活都围绕着海量的数据和文件展开。然而&#xff0c;随着数据量的不断增加&#xff0c;如何高效地管理这些数字资产成为了摆在我们面前的一大难题。今天&#xff0c;我要向您介绍一种革命性的方法——利用办公软件实现文件夹编号批量复制…...

Windows kubectl终端日志聚合(wsl+ubuntu+cmder+kubetail)

Windows kubectl终端日志聚合 一、kubectl终端日志聚合二、windows安装ubuntu子系统1. 启用wsl支持2. 安装所选的 Linux 分发版 三、ubuntu安装kubetail四、配置cmder五、使用 一、kubectl终端日志聚合 k8s在实际部署时&#xff0c;一般都会采用多pod方式&#xff0c;这种情况下…...

【MySQL】数据库——事务

一.事务概念 事务是一种机制、一个操作序列&#xff0c;包含了一组数据库操作命令&#xff0c;并且把所有的命令作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这一组数据库命令要么都执行&#xff0c;要么都不执行事务是一个不可分割的工作逻辑单元&#xff0c;在数…...

python代码缩进规范(2空格或4空格)

C、C、Java、C#、Rust、Go、JavaScript 等常见语言都是用"{“和”}"来标记一个块作用域的开始和结束&#xff0c;而Python 程序则是用缩进来表示块作用域的开始和结束&#xff1a; 作用域是编程语言里的一个重要的概念&#xff0c;特别是块作用域&#xff0c;编程语言…...

前后端分离的后台管理系统开发模板(带你从零开发一套自己的若依框架)上

前言&#xff1a; 目前&#xff0c;前后端分离开发已经成为当前web开发的主流。目前最流行的技术选型是前端vue3后端的spring boot3&#xff0c;本次。就基于这两个市面上主流的框架来开发出一套基本的后台管理系统的模板&#xff0c;以便于我们今后的开发。 前端使用vue3ele…...

【C++ | 委托构造函数】委托构造函数 详解 及 例子源码

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

iCloud邮件全攻略:设置与使用终极指南

标题&#xff1a;iCloud邮件全攻略&#xff1a;设置与使用终极指南 摘要 iCloud邮件是Apple提供的一项邮件服务&#xff0c;允许用户在所有Apple设备上访问自己的邮件。本文将详细介绍如何在各种设备和邮件客户端上设置和使用iCloud邮件账户&#xff0c;确保用户能够充分利用…...

【计算机毕业设计】基于微信小程序的电子购物系统的设计与实现【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…...

CSS实现动画

CSS实现动画主要有三种方式&#xff1a;transition&#xff0c;transform&#xff0c;和animation1。以下是一些详细的逻辑&#xff0c;实例和注意事项&#xff1a; Transition&#xff1a;transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。例如&#xff…...

Python+Pytest+Allure+Yaml+Jenkins+GitLab接口自动化测试框架详解

PythonPytestAllureYaml接口自动化测试框架详解 编撰人&#xff1a;CesareCheung 更新时间&#xff1a;2024.06.20 一、技术栈 PythonPytestAllureYamlJenkinsGitLab 版本要求&#xff1a;Python3.7.0,Pytest7.4.4,Allure2.18.1,PyYaml6.0 二、环境配置 安装python3.7&…...

[OtterCTF 2018]Bit 4 Bit

我们已经发现这个恶意软件是一个勒索软件。查找攻击者的比特币地址。** 勒索软件总喜欢把勒索标志丢在显眼的地方&#xff0c;所以搜索桌面的记录 volatility.exe -f .\OtterCTF.vmem --profileWin7SP1x64 filescan | Select-String “Desktop” 0x000000007d660500 2 0 -W-r-…...

计算机视觉全系列实战教程 (十四):图像金字塔(高斯金字塔、拉普拉斯金字塔)

1.图像金字塔 (1)下采样 从G0 -> G1、G2、G3 step01&#xff1a;对图像Gi进行高斯核卷积操作&#xff08;高斯滤波&#xff09;step02&#xff1a;删除所有的偶数行和列 void cv::pyrDown(cv::Mat &imSrc, //输入图像cv::Mat &imDst, //下采样后的输出图像cv::Si…...

正确重写equals和hashcode方法

1. 重写的原因 如有个User对象如下&#xff1a; public class User {private String name;private Integer age; }如果不重写equals方法和hashcode方法&#xff0c;则&#xff1a; public static void main(String[] args) {User user1 new User("userA", 30);Us…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...