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

swiper+fixed的错误，splice函数的使用，提取年月日substring

news 来源：原创 2024/9/30 6:48:43

做项目时的一些问题

swiper+fixed
splice函数的使用
- 重点在 alldata.splice(0, alldata.length, ...response.data.data);
- - splice
  - alldata.splice(0, alldata.length, ...response.data.data) 这行代码的功能
  - 为什么不直接赋值
提取年月日 substring

swiper+fixed

项目中的一个错误：网页使用了swiper，同时某一个页面想实现左右分栏+中间悬浮div。此时中间的div不能使用fixed，因为这是相对于浏览器的，会导致页面错乱，其他swiper的item中也会出现这个div。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局和中间悬浮图片放大</title><style>body {margin: 0;padding: 0;display: flex;height: 100vh;}/* 左侧和右侧栏各占页面50% */.left, .right {width: 50%;height: 100%;}.left {background-color: #f8b400;}.right {background-color: #4caf50;}/* 中间的悬浮div */.center {position: absolute;width: 200px; /* 中间div的宽度 */height: 200px; /* 中间div的高度 */background-color: #ffffff;border: 2px solid #ccc;top: 50%; /* 垂直居中 */left: 50%; /* 水平居中 */margin-left: -100px; /* 中间div宽度的一半，用于精确居中 */margin-top: -100px;  /* 中间div高度的一半，用于精确居中 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);text-align: center;line-height: 200px; /* 使内部内容居中 */overflow: hidden; /* 保证图片放大时不超出div */}.center img {width: 100%;height: 100%;transition: transform 0.3s ease; /* 动画过渡 */}/* 鼠标悬浮时图片放大 */.center:hover img {transform: scale(1.2); /* 图片放大1.2倍 */}</style>
</head>
<body><div class="left">左侧栏</div><div class="right">右侧栏</div><div class="center"><img src="https://via.placeholder.com/200" alt="示例图片"></div>
</body>
</html>

splice函数的使用

在某个页面，我希望在onMounted时，发送axios请求，并把请求来的数组，渲染到页面上。

关键点

① 要用响应式数据

const alldata = reactive([]);

② 异步函数的调用

// 定义异步函数来获取数据
const getAllData = async () => {console.log('调用了');try {const response = await axios.get('/news/list');alldata.splice(0, alldata.length, ...response.data.data);console.log(response.data.data);} catch (error) {console.error('Error', error);}
};

重点在 alldata.splice(0, alldata.length, …response.data.data);

splice

splice 方法
JavaScript 数组的 splice 方法是一个非常强大的方法，用于添加、删除或替换数组中的元素。splice 方法可以接受多个参数：

第一个参数（0）指定修改数组的起始位置。
第二个参数（alldata.length）指定应该删除多少元素。
后面的参数是要添加到数组中的新元素。

alldata.splice(0, alldata.length, …response.data.data) 这行代码的功能

（1）清空数组 alldata（删除所有现有元素）。
（2）将从API获取的新数据（response.data.data）添加到清空后的数组中。

为什么不直接赋值

为什么使用 splice 而不是直接赋值？

在Vue中，直接赋值如 alldata = response.data.data; 会替换掉整个数组，这在某些情况下可能不会触发视图更新，因为Vue可能无法检测到数组内部元素的变动。使用 splice 方法可以确保Vue能够追踪到数组内部的变化，从而正确地更新视图。

③ 调用

 onMounted(async () => {await getAllData();console.log('alldata');console.log(alldata);});

提取年月日 substring

从字符串“2024-05-26T08:30:32.498Z”中分别提取出2024 05 26

let dateTimeStr = "2024-05-26T08:30:32.498Z";// 提取年
let year = dateTimeStr.substring(0, 4);// 提取月
let month = dateTimeStr.substring(5, 7);// 提取日
let day = dateTimeStr.substring(8, 10);console.log("Year:", year);
console.log("Month:", month);
console.log("Day:", day);