王者荣耀官网（移动端）--笔记
1、“vscode设置中文的方法：首先打开vscode ，并按快捷键“Ctrl+Shift+P”；然后输入“configure language”，并回车；最后选择简体中文安装即可。重启
2、相关插件的安装 compile hero
3、设置 (Code => 首选项 => 设置)=>(设置页面下 => 扩展 => compile Hero)
// 设置compile Hero选项
1、取消勾选javascript-out-put-toggle,避免对js造成编译
2、设置LESS-output-directory 为./,将LESS编译的结果放在当前目录
3、取消勾选Disable-compile-files-on-did-save-code,这样就可以在保存代码时自动完成编译
less中定义变量
less中使用变量
一、rem布局:
根元素的字体大小 = 设备视口宽度 / 设计稿宽度 * 100
于是，我们仅需使用一段JS代码，保证根元素的字体大小为上述公式的计算结果
(function () { function setFont() { var designWidth = 750; // 移动端设计宽度通常为750； // 设置根元素字体大小 = 视口宽度 / 设计稿宽度*100 document.documentElement.style.fontSize = (document.documentElement.clientWidth / designWidth) * 100 + "px"; } setFont(); window.addEventListener('resize', setFont); })();
以750作为大多数通用设计稿的尺寸为例，通过上面函数完成rem布局，通过计算得出根元素字体大小为：50px
二、box-sizing:border-box;
// css * { margin: 0; padding: 0; box-sizing: border-box; }
// 浮动：做文字环绕效果 // 弹性盒：单行或单列布局 // 网格：多行多列布局
弹性盒小游戏：https://flexboxfroggy.com/
三、弹性盒布局
默认情况下，弹性项目沿着主轴依次排列，侧轴拉伸
更改方向：通过`flex-direction`可更改主轴方向
主轴排列：通过`justify-content`属性，可以影响主轴的排列方式
侧轴排列：通过`align-items`属性，可以影响侧轴的排列方式
弹性项目伸缩
所谓伸缩，是指在主轴方向上，当弹性容器有额外空间时，是否需要拉伸，当空间不足时，是否需要压缩
在弹性项目上使用`flex`属性，可设置拉伸和压缩比例：`flex: 拉伸比例 压缩比例 初始尺寸` ，默认情况下，`flex: 0 1 auto`
拉伸示例：
压缩示例：
主轴换行：默认情况，当主轴剩余空间不足时，按照压缩比例进行压缩，但如果设置了主轴换行，则不会压缩，直接换行显示
给弹性容器设置`flex-wrap: wrap`，即可主轴换行
四、轮播图
轮播的本质：一个固定宽度的容器包含多个占满自身宽度的子项，可以通过用户的操作或自动切换子项，子项完成切换后，会做一些后续的处理
HTML结构
<div class="slider-container"> <div class="slider-item">子项1的内容，可以是任意内容</div> <div class="slider-item">子项2的内容，可以是任意内容</div> <div class="slider-item">子项3的内容，可以是任意内容</div> </div>
注意：子项可以时任何内容，可以是文字、图片、列表项。我们切换的只是slider-item
CSS布局
// 1. 容器的宽度必须固定，通常设置为撑满父元素。 // 2. 容器横向超出部分必须隐藏 // 3. 子元素的宽度和容器宽度相同 // 4. 子元素必须无间隙的并排排列 // 基于上述几点，可以得到下面的关键样式 .slider-container{ width: 100%; overflow-x: hidden; display: flex; // 设置为弹性盒，让子项并排排列 } .slider-item{ width: 100%; // 子项宽度和容器相同 flex-shrink: 0; // 设置子项不可压缩 }
js功能
页面中可能会出现多个这样的轮播区域，因此，我们可以提供一个函数，用于创建一个轮播区域
// 传入容器DOM，完成该区域的轮播功能 // 该函数需要实现手指滑动切换、自动切换 // @param {HTMLElement} container 轮播容器 function createSlider(container){}
考虑到不同的轮播区域可能包含以下的区别：
1. 有些轮播区域需要自动切换，有些则不需要，还有可能自动切换的时间不同
该函数需要提供一个额外的参数，告诉函数自动切换的间隔时间，如果传入0，则表示不进行自动切换
2. 每次切换之后，可能需要做一些后续的事情，不同的轮播区域做的后续处理是不一样的
该函数需要提供一个额外的参数，告诉函数切换后做什么，该参数自然是一个回调函数
3. 轮播区域创建好之后，可能随时因为用户的其他操作切换到不同的板块
该函数需要返回一个函数，让调用者可以随时使用该函数实现切换
针对上面三个问题，于是，将函数修改为下面的格式
// 完成该区域的轮播功能 // 该函数需要实现手指滑动切换、自动切换 // @param {HTMLElement} container 轮播容器 // @param {Number} duration 自动切换的间隔时间，0表示不进行自动切换 // @param {Function} callback 完成切换后需要调用的函数 // return {Function} 返回一个函数，调用函数，可以随意的切换显示的子项 function createSlider(container, duration, callback) { /** * 切换到指定的子项 * @param {Number} index 指定下标 */ function switchTo(index) {} return switchTo; }
假设该函数已完成，我们就可以这样使用它：
// 创建轮播区域1，自动切换，间隔1秒，完成切换后调用指定的函数 createSlider(dom1, 1000, function(index){ // 将第index个原点变为激活状态 }) // 创建轮播区域2，不自动切换，完成切换后调用指定的函数 createSlider(dom2, 0, function(index){ // 将第index个标题变为激活状态 }) // 当第3个标题被点击时，切换到第3个子项 title3.onclick = function(){ goto(3); }
五、移动端事件
移动端触摸事件：移动端提供了三个与触摸相关的事件:
// ouchstart 开始触屏 // touchmove 手指在屏幕上滑动 // touchend 手指离开了屏幕
在上述三个事件中，均提供了事件参数`e`，在此例中，我们需要到使用下面两个表达式
e.touches[0].clientX; // 获取第一个手指当前在屏幕上的x坐标 e.touches[0].clientY; // 获取第一个手指当前在屏幕上的y坐标
classList：HTML5为dom元素提供了classList属性，可以非常方便的操作dom的类样式
dom.classList.add('a'); // 添加类样式 a
dom.classList.remove('a'); // 移除类样式 a
六、模块封装js
封装板块样式和功能
html结构
<div class="block-container news-list">
<div class="block-title">
<div class="spr spr_news"></div>
<h2>新闻资讯</h2>
<a href="" class="spr spr_more"></a>
</div>
<div class="block-main">
<div class="block-menu">
<span class="active">热门</span>
<span>新闻</span>
<span>公告</span>
<span>活动</span>
<span>赛事</span>
</div>
// 使用之前的轮播图结构
<div class="slider-container">
<div class="slider-item">
<div class="news-item activity">
<a href="#">狄某有话说|诈骗团伙落网 揭露新型</a>
<span>06/29</span>
</div>
<div class="news-item notice">
<a href="#">6月29日体验服停机更新公告</a>
<span>06/29</span>
</div>
<div class="news-item hot">
<a href="#">6月29日全服不停机更新公告</a>
<span>06/29</span>
</div>
<div class="news-item news">
<a href="#">6月29日净化游戏环境声明及处罚</a>
<span>06/29</span>
</div>
<div class="news-item match">
<a href="#">6月29日外挂专项打击公告</a>
<span>06/29</span>
</div>
</div>
// 隐藏模块
<div class="slider-item">...</div>
<div class="slider-item">...</div>
<div class="slider-item">...</div>
<div class="slider-item">...</div>
</div>
</div>
</div>
css结构
// 通用样式 .block-container { // ... .block-title { // ... h2 { // ... } } .block-main { .block-menu { // ... span { &.active { // ... } } } } } // 特殊样式 .news-list{ // ... }
进一步封装js功能
/** * 进一步封装板块功能 * @param {HTMLElement} blockContainer */ function createBlock(blockContainer){ // 创建滚动区域 // 给菜单注册点击事件 }
七、远程加载数据
加载远程数据
这里涉及到大量的知识
// 此代码运行后，变量resp中就保存了获取到的数据 var resp = await fetch('json文件的相对路径').then(function(resp){return resp.json()})
注意1：await关键字必须在函数内，并且函数必须被标记为async，示例：
// 示例1 async function test(){ var resp = await ... } // 示例2 (async function(){ var resp = await ... })()
注意2：await关键字的含义为等待，其后续代码是异步执行的
// 示例1 async function test(){ var resp = await ... console.log(1); } test(); console.log(2); // 输出结果：2 1
八、map函数
map函数：map是ES5新增的数组API，称之为映射
下面是一些示例：
var nums = [1, 2, 3, 4, 5] var newNums = nums.map(function(item){ return item * 2; })
var users = [ { name: 'monica', age: 17 }, { name: 'dengge', age: 30 }]; var userInfoes = users.map(function(item){ return '姓名：' + item.name + ', 年龄：' + item.age; })
九、模版字符串
模板字符串：ES6提供了第三种字符串字面量格式——模板字符串，使用模板字符串可以非常轻松的实现换行和拼接
var str = `a b c`; // 等同于 var str = 'a\nb\nc';
var user = { name: 'monica', age: 17 }; var str = `姓名：${user.name}，年龄：${user.age}`; // 等同于 var str = '姓名：' + user.name + '，年龄：' + user.age;
十、网格布局
阮一峰网格布局教程：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
网格布局小游戏：https://cssgridgarden.com/
网格布局是多行多列布局的终极解决方案
生成网格布局
容器生成网格布局后，其所有子元素为网格项目
定义行和列
grid-template-rows：定义行
grid-template-columns：定义列
它们的语法是相同的
改变排列方向
使用属性`grid-auto-flow: column`，可使子元素按列排放
单元格之间的间隙
row-gap: 10px; /* 行间隙为10px */ column-gap: 20px; /* 列间隙为20px */ gap: 10px 20px; /* 行间隙为10px，列间隙为20px */
单元格内部的对齐
默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格
可以使用属性`justify-items`设置**水平方向**的排列方式
可以使用属性`align-items`设置**垂直方向**的排列方式
它们的可取值是相同的：
justify-items: start 左 | end 右 | center 中 | stretch 拉伸;
align-items: start 上 | end 下 | center 中 | stretch 拉伸;
可以使用速写属性`place-items: 垂直对齐方式 水平对齐方式`同时设置这两个值
place-items: start center; /* 垂直靠上，水平居中 */
网格项目定位
默认情况下，网格项目依次排列到单元格中，每个网格占据一个单元格
但可以对网格项目设置`grid-area`属性来改变这一行为
使用方式为：
grid-area: 起始行线编号/起始列线编号/结束行线编号/结束列线编号;
多行文本溢出省略
目前，仅webkit内核的浏览器支持
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; // 最大的行数
十一、filter方法(筛选数组)
// 逐一比较，满足条件存放到新数组中
var num = [1, 2, 3, 4, 5, 6]; var newNum = num.filter(function (item) { return item % 2 === 0 }); console.log(newNum); // [2,4,6]
浙公网安备 33010602011771号