swiper+fixed的错误，splice函数的使用，提取年月日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);
原文地址：https://blog.csdn.net/yavlgloss/article/details/142634928
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！