1、深拷贝 JSON.parse(JSON.stringify(data))
深拷贝可以解决数据改变却不渲染的问题，不过不能拷贝函数
2、原生监听dom 监听滚动
div 加style overflow: auto，则溢出就加个滚动条，监听滚动条h5端用原生dom,dom放在渲染完的生命周期里，则每次滚动都可监听到，centerContent为class
const centerScroll = document.querySelector('.centerContent');
centerScroll.onscroll =()=>{
console.log('我滚动了')
}
给个链接参考http://dev.ksazx.com/web_index.html，下面链接的js代码
<script type="text/javascript">
function showQQ(flag) {
var my_tips = document.getElementById("qq_code");
if (flag) {
my_tips.style.display = "block";
} else {
my_tips.style.display = "none";
}
}
function showWeChat(flag) {
var my_tips = document.getElementById("wechat_code");
if (flag) {
my_tips.style.display = "block";
} else {
my_tips.style.display = "none";
}
}
function showPhone(flag) {
var my_tips = document.getElementById("telephone_code");
// var telephone_text = document.getElementById("telephone_text");
if (flag) {
my_tips.style.display = "block";
} else {
my_tips.style.display = "none";
}
}
//初始化Swiper
var mySwiper = new Swiper('.swiper-container', {
// 循环轮播
loop: true,
// 分页器
pagination: {
el: '.swiper-pagination',
// 动态分页器：当你的slide很多时，为true后，分页器会有大小显示
dynamicBullets: true,
},
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hiddenClass: 'my-button-hidden',
},
// 自动轮播
autoplay: {
delay: 5000,
/**
* stopOnLastSlide => true: 当切换到最后一个slide时停止自动切换
*/
stopOnLastSlide: true,
/**
* disableOnInteraction：用户操作swiper之后，是否禁止自动轮播
* true(默认) => 停止
* false => 恢复自动轮播
*/
disableOnInteraction: false,
},
});
//鼠标移出隐藏按钮，移入显示按钮
mySwiper.el.onmouseover=function(){
mySwiper.navigation.$nextEl.removeClass('hide');
mySwiper.navigation.$prevEl.removeClass('hide');
};
mySwiper.el.onmouseout=function(){
mySwiper.navigation.$nextEl.addClass('hide');
mySwiper.navigation.$prevEl.addClass('hide');
};
function showSwiperButton(flag) {
var my_tips = document.getElementById("button-prev");
var my_tips2 = document.getElementById("button-next");
if (flag) {
// my_tips.style.display = "inline-flex";
// my_tips2.style.display = "inline-flex";
my_tips.style.background = "rgba(0,0,0,0.6)";
my_tips2.style.background = "rgba(0,0,0,0.6)";
}
else {
// my_tips.style.display = "none";
my_tips.style.display = "inline-flex";
my_tips2.style.display = "inline-flex";
my_tips.style.background = "rgba(0,0,0,0.2)";
my_tips2.style.background = "rgba(0,0,0,0.2)";
// my_tips.style.transition = "opacity 2s";
// my_tips2.style.transition = "opacity 2s";
// my_tips2.style.display = "none";
}
}
function partCar() {
window.location.href='http://dev.ksazx.com/html/part_car.html';
}
var point = document.querySelectorAll('.point');
console.log("point" + point);
var hav = document.querySelectorAll('.hav');
var scroll = true; //是否减去导航条高度
function link() {
scroll = false;
}
window.onscroll = function () {
//为了保证兼容性，这里取两个值，哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
for (var i = 0; i < hav.length; i++) {
hav[i].classList.remove("itemActive")
}
var scrollTop;
if (scroll) {
scrollTop = document.documentElement.scrollTop + 80 || document.body.scrollTop + 80;
} else {
scrollTop = document.documentElement.scrollTop | document.body.scrollTop;
document.scrollingElement.scrollTop = scrollTop - 79; //不要加114
scroll = true;
}
for (var index = 0; index < point.length; index++) {
if (index != point.length - 1) {
if (scrollTop >= point[index].offsetTop - 80 && scrollTop <= point[index + 1].offsetTop - 80) {
hav[index].classList.add("itemActive")
}
} else {
if (scrollTop >= point[index].offsetTop) {
hav[index].classList.add("itemActive")
}
}
}
}
</script>
</body>
</html>
3、遍历这样子的数组用hasOwnProperty
let carMap = {
0: {
quantity: 0,
selling_price: 0,
name: 0
},
aa:{
f:2
}
};
for(let item in carMap){
if(carMap.hasOwnProperty(item)){ //判断是否是继承属性（原型链继承）
console.log(carMap[item])
}
}
image.png
4、async-awai异步方法
await会等待执行完再执行后面的代码
5、模板字符串基础
https://www.cnblogs.com/newze/p/7535470.html
6、后台传的完整的html展示出来用什么方法
vue 里面有个v-html，
原生 用insertAdjacentHTML
var str = `<p>这是一个插入的段落</p>
<h1>这是一个插入的段落</h1>
box.insertAdjacentHTML('afterend',str)
image.png
taro小程序
image.png
image.png
7map双循环用这样子的方法
image.png
下面这样子的写法是错误的，会改变原来的数组，所以不setData的时候也会改变
image.png
7 、一张图片的链接如果被第二张图片给替换了，在有缓存的情况下只会显示第一张图片
8、循环数据的方法
image.png
map循环
image.png
set 数组抓取再去重，数组数据必须是唯一的
image.png
只会返回为true的数据
image.png
image.png
用for in 就要去判断 这个属性是不是非继承的
image.png
image.png
9拼英排序 可数组自带的方法 sort 也 可以用这个 https://github.com/MisterChangRay/Mtils2
image.png
image.png
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./Mtils.min.js"></script>
</head>
<body>
<script>
let data = [
{title:'我不是沙雕谢谢'},
{title:'我不'},
{title:'订单是'},
{title:'沙'},
{title:'杀雕'},
]
let data2 = [
{title:'w',item:[{name:'我不是沙雕谢谢'},{name:'我不'}]},
{title:'d',item:[{name:'订单是'}]},
{title:'s',item:[{name:'沙'},{name:'杀雕'}]},
]
data.map(v=>{
v.key = Mtils.utils.makePy(v.title).substr(0,1)
})
let ary = [];
data.map(v=>{
ary = [...ary,v.key]
})
ary.sort();
let list = [];
let copyData = JSON.parse(JSON.stringify(data))
ary.forEach((v,i)=>{
copyData.forEach((value,index)=>{
if(value.key==v){
list = [...list,copyData[index]];
copyData.splice(index,1);
}
})
})
console.log(list)
</script>
image.png
10、小说翻页动画用turnjs 但是是jq的
下面这个是自动翻页
<style>
#box{
width: 300px;
position: relative;
height:95px;
border:2px solid yellow;
margin:50px auto;
overflow: hidden;
}
#box>div{
position: absolute;
width:100%;
top:0;
transition: all 1000ms ease;
}
#box>div>p{
text-align: center;
background: lightblue;
line-height: 40px;
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id='box'>
<div id='container'>
</div>
</div>
<script>
let ary = [
{title:'aaaaa'},
{title:'bbbbb'},
{title:'ccccc'},
{title:'ddddd'},
{title:'eeeee'},
{title:'fffff'},
{title:'ggggg'},
{title:'hhhhh'},
{title:'iiiii'},
{title:'jjjjj'},
]
ary.forEach((v,i)=>{
container.innerHTML += `<p>${v.title}</p>`;
})
let i = 1;
setInterval(()=>{
if(i>=ary.length/2) i=1;
container.style.top = i*-90 +'px';
i++;
},4000)
</script>
网友评论