7-25
3 vue3
5 一个在线部署nodejs应用的网站
6 正则表达式匹配{}
下方两个表达式都可以匹配{}，但有区别
{[^}]+\}
{.+\}
{[^}]+\}可以匹配：
{xxx}
{xxx}{xxx} 中的第一个{xxx}，因为遇到}就中断匹配了
而{.+\}可以匹配：
{xxx}
{xxx}{xxx} 所有
正则中的*+?
- runoo*b，可以匹配 runob、runoob、runoooooob 等，* 号代表前面的字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。
- runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。
- colou?r 可以匹配 color 或者 colour，? 问号代表前面的字符最多只可以出现一次（0次、或1次）。
[1] 正则表达式(匹配第一个花括号).https://blog.csdn.net/WuLex/article/details/82116701
7 px-to-viewport使用问题
unknown error from PostCSS plugin. Your current PostCSS version is 7.0.36, but postcss-px-to-viewport uses 8.3.6. Perhaps this is the source of the error below.
注意：与postcss的版本
无关原因：配置出错
module.exports = {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: "1920",
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
// exclude: [/node_modules/],
// 如果这里改为"node_modules"则出错，改为正则则消除错误
exclude: ["node_modules"],
landscape: false,
},
},
};
8 滚动效果
利用swiper实现，但有以下弊端：
- 鼠标进入自动停止，离开自动恢复后有一点速度问题
- 用户操作正在滚动的swiper后，会照成滚动混乱
综合其他因素，现有两个解决方案：
- 只进行滚动和鼠标进入停止、离开启动的逻辑，用户不允许操作轮播图
- or只进行滚动和鼠标进入停止、离开启动的逻辑，如果用户操作轮播图，则前方所有逻辑失效，即用户操作后不再进行自动轮播、鼠标进入停止、离开启动。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>持续滚动-走马灯效果</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
/* 改变过渡为匀速 */
.swiper-container .swiper-wrapper {
-webkit-transition-timing-function: linear;
/* 之前是ease-out */
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}
.swiper-slide {
/* 注意：所有元素的总宽度必须大于容器宽度，否则轮播会自动停止 */
width: 1000px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">3</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const AUTOPALY_DELAY = 5000
const swiper = new Swiper('.swiper-container', {
speed: AUTOPALY_DELAY, //匀速时间
autoplay: {
delay: 1,
// disableOnInteraction: false,
disableOnInteraction: true,
},
loop: true,
slidesPerView: "auto",
// slidesPerView: 2,
// allowTouchMove: false,
// 方案一：是否允许操作
on: {
touchEnd: function (swiper, event) {
swiper.autoplay.stop()
// 方案二：如果用户操作，则停止所有自动事件
$('.swiper-container').off()
},
},
})
// 存放鼠标悬浮时的transform属性（行内属性）
let nextTransForm = "";
// 轮播图从暂停位置移动到原本应到的位置所用的时间
let nextTime = 0;
//鼠标移入悬停
$('.swiper-container').on('mouseenter', function () {
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0]
.style.transitionDuration = 0 + "ms";
nextTransForm = document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0].style.transform;
// 轮播图原本应移动到的位置
let nextTransPosition = -1 *
parseInt(
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0]
.style.transform.split("translate3d(")[1]
.split("px")[0]
);
// // 鼠标悬浮时时轮播图位置
let nowTransPosition = -1 *
parseInt(
window
.getComputedStyle(
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0],
false
)["transform"].split("1, ")[2]
.split(",")[0]
);
// 存放鼠标悬浮时轮播图的真实transform属性（非行内属性）
let nowTransForm = window.getComputedStyle(
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0],
false
)["transform"];
// // 计算轮播图从暂停位置移动到原本应到的位置所用的时间（370是我自定义的每个slide的宽度）
nextTime = 5500 * ((nextTransPosition - nowTransPosition) / 1000);
// // 改变行内transform属性
console.log('[nextTransPosition]:', nowTransForm)
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName(
"swiper-wrapper"
)[0].style.transform = nowTransForm;
// 不写也没关系
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName(
"swiper-wrapper"
)[0].style.transitionDuration = "0ms";
this.swiper.autoplay.stop();
swiper.autoplay.stop();
})
// //鼠标移出滚动
$('.swiper-container').on('mouseleave', function () {
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName(
"swiper-wrapper"
)[0].style.transform = nextTransForm;
document
.getElementsByClassName("swiper-container")[0]
.getElementsByClassName("swiper-wrapper")[0]
// .style.transitionDuration = AUTOPALY_DELAY + "ms";
.style.transitionDuration = nextTime + "ms";
swiper.autoplay.start();
})
</script>
</body>
</html>
注意：单独的以下语句并不会达到满意效果，因为swiper的autoplay.stop()要等待轮播完毕才会停止
mySwiper.el.onmouseover = function(){
//鼠标放上暂停轮播
mySwiper.autoplay.stop();
}
mySwiper.el.onmouseleave = function(){
mySwiper.autoplay.start();
}
[1] swiper方法mySwiper.autoplay.stop()延迟执行问题.https://blog.csdn.net/qq_45560350/article/details/115347482
9 react中使用swiper
[1] Swiper React Components.https://swiperjs.com/react
[2] react 中使用swiper.https://blog.csdn.net/supming1/article/details/108204052
10 WSL允许用其他电脑ssh连接
将wsl端口映射到本机端口
[1] WSL允许用其他电脑ssh连接.https://blog.csdn.net/u010328478/article/details/116457769