抖音记录..搞错了，再来。博客，记录美好的坑，本文记录作者工作上遇到的坑。
# 自动滚动轮播浏览文章
后台返回文章数组，同时有一个动态秒数，需要在这个秒数内滚动读完一篇文章，并下一篇。
思路：渲染文章后，获取文档的高度 和 屏幕的高度，相减得到要滚动的高度，再用这个高度除动态秒数，得到一秒要移动的距离，通过定时器每秒重复移动滚动条。
# 坑：
$('.content-box').html(articleData[pageCount])此代码将文章写入页面显示的容器。下面获取文档的高度，代码按正常顺序从上往下执行，但文章节点并未完全插入容器，因此 获取文档的高度不准确。
# 解决方法：
通过定时器延迟执行代码，确保文章节点完全插入容器，这时获取的高度非常准确！！！
function look() {
pageCount++;
allPageCount++;
if (pageCount >= articleData.length) {
// 读完第一次请求的文章后，请求新的文章
page++;
getArticle(page);
return;
}
let pageSecond = readSecond;
$("#second").text(pageSecond);
$(".content-box").html(articleData[pageCount]);
// 上面添加代码完成才能获取完整的高度
setTimeout(() => {
let win = $(window).height(); // 屏幕高度
let doc = $(document).height(); // 文档高度
let height = doc - win; // 要移动的总距离
let scrollY = height / pageSecond; // 每秒移动的距离
let bb = scrollY;
let gun = setInterval(() => {
bb += scrollY;
$("html,body").animate({ scrollTop: bb }, 1000);
}, 1000);
timer = setInterval(() => {
pageSecond--;
console.log(pageSecond, readSecond);
$("#second").text(pageSecond);
if (pageSecond == 0) {
clearInterval(gun);
// 重置滚动位置
$("html,body").animate({ scrollTop: 0 }, 0);
}
if (pageSecond == -1) {
clearInterval(timer);
clearInterval(articleTimer);
look();
}
}, 1000);
}, 1000);
}
完成后的效果图：
# App 长按选中文字
# 坑：
在网页版中可以正常选中，app 却不行。
# 解决方法：
添加一段 css 代码，user-select:text
# 取值：
- none：
- 文本不能被选择
- text：
- 可以选择文本
- all：
- 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
- element：
- 可以选择文本，但选择范围受元素边界的约束
p {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-o-user-select: text !important;
user-select: text !important;
}
# ios 使用 bootstrap 模态框
版本：bootstrap v3.3.7
# 坑：
在 ios 上，会出现背景的遮罩层层级最高的问题，导致不能进行互动操作
# 解决方法：
这个 bug 的原因在与
<div class="modal-backdrop in"></div>这个元素，这个就是背景半透明的遮罩层
将这个遮罩层的层级调到-1，自己手动在modal编辑样式，将modal背景变成遮罩层
我在一个公共的文件中(因为我多处用到模态框)，判断是否是 ios，安卓没问题
<script>
function checkPhone() {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
return true;
} else if (/(Android)/i.test(navigator.userAgent)) {
return false;
}
}
let system = checkPhone();
if (system) {
let template = `
<style>
.modal-backdrop {
z-index: -1 !important;
}
.modal {
z-index: 9999 !important;
background: rgba(0, 0, 0, .5) !important;
}
</style>
`;
$("body").append(template);
}
</script>
# 移动端禁止滑动行为
touchmove 滑动事件
// 禁止蒙版移动
$("#cover1").on("touchmove", function (e) {
e.preventDefault();
});
# git 创建分支，txt 文件乱码
git branch [name] ----注意新分支创建后不会自动切换为当前分支
git checkout [name] -----切换分支
# 监听浏览器返回事件
window.addEventListener("popstate", function () {
console.log(111);
localStorage.setItem("test", 1111);
window.location.href =
"http://30.shinuokeji.net/app/index.php?i=1&c=entry&do=shop&m=sz_yi";
});
var state = {
title: "title",
url: "#",
};
window.history.pushState(state, null, "#");
# 使用谷歌翻译
谷歌翻译已经不维护了，官方的 api 文档也没了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0 ,maximum-scale=1, user-scalable=no"
/>
<meta
name="viewport"
content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
/>
<meta name="format-detection" content="telephone=no" />
<script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!--new add end for style1-->
</head>
<script>
window.PointerEvent = undefined;
</script>
<style>
body {
top: 0px !important;
}
.goog-te-banner-frame {
display: none;
}
#google_translate_element {
touch-action: pan-y;
}
.credit_no {
height: 165px;
width: 80%;
margin: 50px 0px 60px;
color: #ccc;
font-size: 12px;
text-align: center;
margin: 100px auto;
padding: 20px;
}
#credit_loading {
padding: 10px;
color: #666;
text-align: center;
padding: 20px;
}
#goog-gt-tt {
width: 100% !important;
}
/** { touch-action: pan-y; }*/
/*#zh_change {position: fixed;top: 5px;left: 5px; font-size: 13px;color: rgb(30,167,247);background-color: white;border: 0px;box-shadow: 0px 1px 10px 1px;z-index: 99999;}*/
</style>
<body>
<!--<button id="zh_change">中英切换</button>-->
<div
id="google_translate_element"
style="position:fixed;top:0px;right:5px;opacity:1;z-index: 99999;display: block"
></div>
<div>你好世界</div>
</body>
<script language="javascript">
//翻译
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
//这个是当前页面的原语言，便于插件精确翻译
pageLanguage: "zh-CN",
//这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi
includedLanguages: "en,zh-CN",
//选择语言的样式，这个是面板，还有下拉框的样式，具体的记不到了，找不到api~~
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
//自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，这个属性没有用的话，请看文章底部的其他方法
autoDisplay: true,
//还有些其他参数，由于原插件不再维护，找不到详细api了，将就了，实在不行直接上dom操作
},
"google_translate_element" //触发按钮的id
);
}
var div1 = document.querySelector("#google_translate_element");
//限制最大宽高，不让滑块出去
var maxW = document.body.clientWidth - div1.offsetWidth;
//手指触摸开始，记录div的初始位置
div1.addEventListener("touchstart", function (e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
oL = touch.clientX - div1.offsetLeft;
oT = touch.clientY - div1.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
});
//触摸中的，位置记录
div1.addEventListener("touchmove", function (e) {
var ev = e || window.event;
var touch = ev.targetTouches[0];
var oLeft = touch.clientX - oL;
// var oTop = touch.clientY - oT;
if (oLeft < 0) {
oLeft = 0;
} else if (oLeft >= maxW) {
oLeft = maxW;
}
div1.style.left = oLeft + "px";
});
//触摸结束时的处理
div1.addEventListener("touchend", function () {
document.removeEventListener("touchmove", defaultEvent);
});
//阻止默认事件
function defaultEvent(e) {
e.preventDefault();
}
setInterval(() => {
let language = document
.querySelector(".goog-te-menu-frame")
.contentWindow.document.querySelectorAll(".text");
language.forEach((element) => {
if (element.innerText === "英语") {
element.innerText = "English";
}
});
let str = document.querySelector(".goog-te-menu-value > span");
if (str.innerText === "英语") {
str.innerText = "English";
}
}, 1000);
</script>
</html>
# vscdoe 行尾序列格式
vscdoe 行尾序列格式有两种
- LF
- CRLF
# 坑：
当 vscode 编辑器的格式与项目中的配置不同时，prettier 会报错。
git 拉代码的时候默认是 CRLF 格式
# 解决方法：
执行命令
git config --global core.autocrlf false