JD_M案例知识点（移动端）

# JD_M案例知识点

基础布局+顶部通栏+顶部轮播图+导航栏

知识点

base.css

::before,::after 伪元素

统一设置文字 sans-serif 移动端的默认字体
font-family: '微软雅黑',sans-serif;
设置背景图片的大小压缩了一倍目的是为了防止用户看到像素颗粒，如果要一行写完background，size要加“/”
轮播图——左右两张的无限轮播图

最左边加上最后一张
最右边加上第一张图
默认给用户看的是：如果用索引来说，是索引为1的那一张（最前面一张的索引为0）

图片分辨率问题

ios中，会准备多张图片
早期的web开发中也会准备多张图片
现在流行的是准备一张大图然后进行压缩

为了保证零头不影响布局

设置：width: 33.33333%;
而不是：width: 33%;

移动端屏幕适配布局方式：

宽度百分比，定高
viewport

抽取通用样式的目的：

方便使用
将常用的样式定义为通用的资源，使用时直接添加class名字就可以

技术点：less

优点
1. 为CSS赋予了动态的语言特性
2. 变量、继承、运算、函数等，方便CSS的编写与维护
sublime安装less插件
1. 下载压缩包
2. sublime 菜单的倒数第二项
- 第一个选项
- 把弹出的文件夹的路径，复制
1. 双击压缩包
- 解压到
- 将复制的路径拷贝进去
- 确定解压
1. 开关sublime 即可
less只是一个纯文本
1. 装插件与否仅仅影响的是高亮效果
2. 不影响代码的编写
3. webstorm 我需要研究一下再告诉大家
less使用
1. 创建后缀是.less的文件
2. 运行考拉
3. 讲less的文件夹拖入考拉
4. 只要保存.less文件 ctrl+s 考拉会自动帮助我们进行编译
- 编译的作用是: 讲less 转化为 .css文件
- 讲less中的语法根据一定的规则替换为对应的css代码
考拉编译注意点
1. 如果弹出红色框框意味着写错了代码
2. 如果放.less文件的文件夹叫做 less
- 在编译的时候会在跟less文件夹同级的目录下创建一个叫css的文件编译好的代码就在那里面
1. 如果文件夹名不叫 less 而是其他的那么会在统计目录下
less的作用
- 变量的作用
  1. 实现替换变量值,所有使用变量的地方都会被替换
  2. 比如页面大量使用jd红,要换位淘宝红只需要替换变量值即可
- 京东m使用less来写
  1. jd红定义变量
  2. 嵌套多的结构使用 less的嵌套写法
  3. 混合的写法可以先别急着用上去：width:100%;

less语法

注释

//注释：less支持跟js一样是注释，并且这样的注释
/我是一行注释，编译时，该注释会被保留/

变量定义

//格式：变量名:变量值
@jdRed: rgb(201,21,35);//定义宽度
@minWidth:100px;//定义图片尺寸
@imgSize:100px 100px;

类似于函数用法

括号中参数名: 参数的默认值
如果使用该class 进行混合时，如果不传递参数,会使用默认值

.red{background-color: red;border:1px solid red;color:red;
}.oneColor(@color:#0094ff){background-color: @color;border:1px solid @color;color:@color;
}body{.red();
}ul{.oneColor(yellow);
}div{.oneColor();
}

嵌套

//css
.box {background: #fff;
}
.box ul {color: red;
}//less
.box {background: #fff;ul {color: red;}
}

js基础

1. 滚动后顶部通栏透明度

scrollTop获取滚动后，导航栏距离顶部的距离，最新版本浏览器（chrome和火狐，其他没有测试）不能使用document.body.scrollTop获取，只能使用document.documentElement.scrollTop获取。

2. 倒计时

先获取一些必要元素
每个一秒执行一次代码（定时器）
易错点1：dom元素修改文本，需要用.innerHTML
易错点2：时分秒的十位数记得取整，否则显示的是小数

3. 轮播图

自动轮播图
1. 定义index记录索引值
2. 获取一些必须要知道的变量
- 单个元素宽度
- 轮播图的ul（很长的ul：1000%）
- 索引的ul里面的li（li数组）
1. 定时器
- index++
- 修改ul位置
- 使用过渡来实现动画（缓动）效果
1. 过渡结束事件
- transitionend
- 加前缀：webkitTransitionEnd
- 需要使用addEventListener的方式添加
- 默认的方法名为transitionend
- 由于浏览器兼容性问题，可能需要添加前缀
  - webkitTransitionEnd
  - mozTransitionEnd
  - msTransitionEnd
  - oTransitionEnd
移动端特有事件
1. touch
- touchstart：当手指触摸屏幕时触发，事件参数中有触摸点的值
- touchmove：当手指在屏幕上滑动时连续的触发，事件参数中有触摸点的值
- touchend：当手指从屏幕上移开时触发，事件参数中没有触摸点的值
1. 特点
- 不能通过doc.ontouchstart的方式去绑定
- 只能addEventListener的方式进行绑定
- 只在移动设备上支持
1. 常见封装
- 左滑，右滑
- 长按
- 捏合
- 这些事件都是基于touch三个事件的封装

4. 注意

实际开发中，页面的数据的获取
如果是一个动态网站（基本上现在是所有网站都是动态的），页面中的内容是动态生成的
- 比如：img的src属性，a标签的本质，页面布局效果等
不刷新页面获取新数据：ajax技术
- 发送请求即可
- 在什么情况下发送请求：
  1.点击加载更多：点击发送ajax
  1. 滚动加载更多：滚动发送ajax
  2. 失去焦点验证用户名：失去焦点事件发送ajax

分类搜索页面(list.html)

1. 左侧滑动

向上移动，是y的负方向
移动的最小值：父盒子的长度-ul的长度
移动的最大值：默认是0

2. 让代码的通用性更强

关于DOM元素的值：通过先获取DOM元素，然后根据DOM元素获取：
- 高度
- 宽度
- 子元素个数
- 默认的样式等
不要在代码中出现magicNumber
- magicNumber：代码中写死具体的数值style.transition='all .3s';
- 或者是：distance += 10;
- 对于代码量足够大的项目，如果大量使用magicNumber，那么维护起来是致命的。
- 实际开发中，在代码最开始的时候定义一大堆的变量
- 成熟的代码一般都是先定义变量
移动端click事件的触发，会延迟200ms
- 为了提升用户体验，能顾实时触发，一般会自己封装一个叫tap的方法，手指触发
- touch只有3个，左右滑动，滚动都是封装的
- 如何算tap事件：手指点上去不移动，快速松开。用以下三个事件封装：
  - touchstart
  - touchmove：手指不动是不会触发的，只要能执行这个方法，就是失效的，因此不移动的逻辑，可以在这里实现
  - touchend：记录开始时间的差值
console.log();是十分消耗性能的，所以该方法只会出现在测试阶段，上线时会去掉。
使用老版本的谷歌浏览器，刚切换到移动端视口时还能够看到click的延迟效果，如果刷新之后就看不到了。
手机测试：
- 比较low的方法，（公司不用）
  - 直接拷贝到手机上，通过手机的资源管理器打开html文件，指定使用的浏览器即可
  - 手机登陆qq
  - 电脑登陆qq：发送到我的设备，手机qq打开网站，选择使用的浏览器，注意iphone只支持使用qq浏览器才能打开
- 公司里用的方法：会有一个专门的测试服务器，写好了以后上传即可
- wamp：
  - 配置完成以后，将自己的移动站点丢到这里
  - 保证手机跟电脑在统一各局域网中（连着同一个wifi）：手机打开浏览器输入电脑的IP地址即可访问
索引值的获取：
1. 可以在for循环中获取
2. 为每一个li保存一个索引属性：<body data-index='1'>，点击li的时候获取该属性的值即可：dom.dataSet['index'];
解决左侧点击到li标签的问题：
为了让a标签的点击范围增大，避免出现用户点击不到a标签的情况：将a标签的宽高设置为100% display: block; width: 100%; height: 100%;

响应式+bootstrap

基本概念

针对所有设备
目的是开发一次即可
会根据设备的屏幕尺寸改变而改变布局

技术的选择

老项目
- 推出的时候手机还没有这么流行
- 重新开发一个移动端的站点
新项目
- 直接做响应式站点
性能考虑
- 在时间、金钱允许的情况下，各开发一个版本是最好的
响应式网站的缺点：代码较多、维护较为复杂
工作中是否选用？看leader：选择项目使用的技术
开发时间：一般情况是，快于1+1

其他

如果直接使用js也是能够实现效果的，只不过可能代码较多
直到CSS3中推出了媒体查询：就是可以通过css去获取一些设备的信息

多媒体查询

-CSS2多媒体查询

@media 规则在CSS2中有介绍，针对不同的媒体类型可以定制不同的样式规则。
CSS3多媒体查询
- CSS2的多媒体查询继承了CSS2多媒体类型的所以思想：取代了查找设备的类型，CSS3根据设置自适应显示。
- 媒体查询可用于检测很多事情，例如：
  - viewport(视窗)的宽度与高度
  - 设备的宽度与高度
  - 朝向(智能手机横屏，竖屏)。
  - 分辨率
- 目前很多针对iOS、Android手机，平板等设备都会用到多媒体查询。
- 浏览器支持：chrome21.0，IE9.0，firefox3.5，safari4.0，opare
- 媒体查询的基础语法：
  - 设备的屏幕尺寸大于等于480的时候，使用括号内的样式
  - 也遵循层叠样式表的
  - 为了避免样式覆盖
  - 可以修改先后顺序
- 实例：
```
  @media screen and (min-width: 480px) {#leftsidebar {width: 200px;float: left;}#main {margin-left: 216px;}}
```

bootstrap字体图标

第一步：glyphicon

设置图标的位置

.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

第二步：glyphicon-barcode
- 设置图标内容
```
.glyphicon-barcode:before {content: "\e040";
}
```

前端框架

有一对预定义的代码

html，css
也有一部分封装的js

可以直接使用

直接使用定义好的class
直接使用它定义好的html层次结构（组件）

也可以改参数使用

bootstrap

2.x：早期的，目前很难看到
3.x：目前较为流行的版本，其中使用较多的是3.3.5
4.x：在测试中，更为侧重于移动端

全局CSS样式

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
预定义的CSS样式
- 直接将需要的类添加给对应的标签，就可以得到想要的效果
栅格系统
- Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
- 栅格
- .container（固定宽度）
  - row，column
  - 在某个范围内取值是一定的
- .container-fluid（100%宽度）
  - row，column
  - 会根据父盒子进行适当的缩放
- 默认将一行分为12份，在col后面对应的数字表示该单元格占几份
- 如果超过了12换行
- 如果想要在不同的品目宽度上，实现不同的布局，可以通过添加col-lg、col-md、col-sm、col-xs
- 如果只写了col-lg，那么会在小于1200的宽度下占一行
- 如果只写了col-lg col-md，那么会在小于992的宽度下占一行
- 如果只写了col-lg col-md col-ms，那么会在小于768的宽度下占一行
- 如果只写了col-lg col-md col-ms col-xs，会在对应的屏幕宽度下使用设置的值
- 实例：从堆叠到水平排列
- 栅格的好处
- 示例：微金所顶部通栏
  - 栅格搭好框架
  - 内部的子元素以及子元素的布局还是使用自己手写css的方式

转载于:https://www.cnblogs.com/luoyu113/p/8544853.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

在对话框中使用进度条
1.声明对话框进度条 ProgressDialog m_pDialog;默认是圆形进度条 2.创建ProgressDialog对象 m_pDialog = new ProgressDialog(所在的Activity.this); 3.设置进度条风格 m_pDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);圆形进度条对话框 m_pDialog.setProgressStyle…...
2024/5/2 2:20:13
关于软件测试中的单元测试-----mock讲解
今天下午接到百度作业帮的面试邀请电话，说要进行面试，我们约的是明天，挂了电话我上网查了一下我申请的职位竟然是软件测试，，，，好吧，只能恶补了关于软件测试中的单元测试-----mock讲解：“java的mock测试框架无论是敏捷开发、持续交付，还是测试驱动开发（TDD）都把单元…...
2024/5/2 4:08:04
零基础学习Java，毕业后好找工作吗？
现在学习Java编程的人不断的增加，但是关于Java编程语言的学习每个人都有自己不同的方法，有的人选择找专业的Java培训班学习，有的人找书籍或者是Java编程视频学习，还有一些人是选择自学Java编程技术，那么零基础学习Java真的能顺利高薪就业吗? 如今互联网行业现在仍然属于非…...
2024/4/18 18:44:46
AXIS 开发讲解
http://www.cnblogs.com/mingzi/archive/2009/03/09/1406839.html...
2024/5/2 0:04:58
京东抢购Python脚本
京东购物车抢购商品Python代码1.准备工作2.代码 1.准备工作环境要求： Python3.8.1；Firefox浏览器插件安装： 1.安装Python相关库（在Windows的cmd里面安装）pip install seleniumpip install datetime2.安装Firefox浏览器驱动：GeckoDriver提取码：e4tv（确保电脑已经有Fir…...
2024/5/2 1:34:11
蒙特卡洛方法（Monte Carlo method，也有翻译成“蒙特卡罗方法”）
蒙特卡洛方法（Monte Carlo method，也有翻译成“蒙特卡罗方法”）是以概率和统计的理论、方法为基础的一种数值计算方法，将所求解的问题同一定的概率模型相联系，用计算机实现统计模拟或抽样，以获得问题的近似解，故又称随机抽样法或统计试验法。上述就是蒙特卡洛方法的基本…...
2024/5/2 3:57:40
手淘 x-sign的签名算法和api接口。已带 x-mini-wua
手淘版的x-sgin的算法接口，终于实现了手淘xsign的协议算法，带最新 x-mini-wua 更新时间：2020年4月20日，*大家都知道，有时候PC和WAP版的协议根本满足不了业务场景的需求，但是手淘可以满足，但是手淘最大的难度就是X-sign,可以说是万事俱备只欠X-sign，因为公司安排给我的…...
2024/4/12 16:50:35
编程实践笔记{Java 线程并发处理 Webservice}(转)
http://www.cnblogs.com/mingzi/archive/2009/03/09/1406694.html1, 保证线程安全的三种方法: a, 不要跨线程访问共享变量 b, 使共享变量是final类型的 c, 将共享变量的操作加上同步 2, 一开始就将类设计成线程安全的, 比在后期重新修复它,更容易. 3, 编写多线程程序,…...
2024/4/20 2:41:24
vs单元测试
VS2008本身集成有单元测试工具，我们可以拿来用一下，首先在创建测试的方法上右键，选择创建单元测试，如下图示：在弹出的对话框中，选择要测试的方法，如下图示：单击OK按钮，即可创建一个测试工程，工程创建好后，会看到如下代码：/// <summary>///A test for Add///&…...
2024/5/2 3:02:31
我理解的马尔科夫链蒙特卡洛（MCMC,Markov Chain Monte Carlo）
本文是From Scratch: Bayesian Inference, Markov Chain Monte Carlo and Metropolis Hastings, in python的阅读笔记马尔科夫链蒙特卡洛（MCMC, Markov Chain Monte Carlo）的定义是：通过在概率分布中进行采样，估计给定观测数据下模型的参数。（MCMC is a class of techniqu…...
2024/5/1 21:29:25
Java学习书籍整理
不知不觉中，做Java开发已经四年了，趁着现在换了工作，还算比较闲，就整理一下自己学习的一些知识。在学习过程中，我喜欢找的一些电子书来系统化的学习，多数时候我都只是做一个大概的了解，没有深入学习，基本就是看下目录，看下前几章的内容，深入的只会在实际用的时候才去…...
2024/5/2 0:36:36
Java——给五子棋添加时间进度条（多线程）
在实现这个功能中我用到了swing中的一个ProgressBar类，这是界面的进度条组件，此外因为我是在五子棋运行的同时有计时的功能，所以此外还需要使用到多线程。我想要达到的效果是给黑白两方固定总时间十分钟，也就是说到黑方落子时计时，落完子后时间暂停，到白方的时间落子同样…...
2024/4/14 17:56:04
Spring Boot之单元测试用例总结
关于单元测试单元测试其核心诉求是将一个复杂的程序进行拆解，分解为若干个独立的可控子模块来实现测试的可控性。在本节将对Spring Boot中可用的单元测试注解以及用法做一个小结。通用注解@RunWith（SpringRunner.class/SpringJUnit4ClassRunner.class) 使用在测试用例类之上…...
2024/5/2 0:35:53
马尔可夫链蒙特卡罗法（Markov Chain Monte Carlo，MCMC）
文章目录1. 蒙特卡罗法2. 马尔可夫链3. 马尔可夫链蒙特卡罗法4. Metropolis-Hastings 算法5. 吉布斯抽样蒙特卡罗法（Monte Carlo method），也称为统计模拟方法（statistical simulation method），是通过从概率模型的随机抽样进行近似数值计算的方法马尔可夫链蒙特卡罗法（…...
2024/4/17 22:05:36
Swing进度条样例
完整版见https://jadyer.github.io/2013/04/24/java-swing-progressbar/package com.jadyer.demo;import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;import javax.swing.JFrame; import ja…...
2024/4/12 9:04:58
Chrome代理设置
1，右上按钮。650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/7C/EF/wKioL1bc8ZrRL-VIAAAnJ_XglB0387.jpg" title="捕获.JPG" alt="wKioL1bc8ZrRL-VIAAAnJ_XglB0387.jpg" />2，【设置】3，【显示高级设置】4，【更改代理服…...
2024/4/9 18:23:10
javascript代码规范问题
javascript代码规范问题是初期的前端工程师最容易忽视的一个问题，那我们又如何来巧妙的避免这些问题？这這里分享一点小经验变量和函数的命名规则空格，缩进，注释的使用规则。其他的规范1.变量和函数的命名规则這个问题在新手中是最常看见的，如以下的：中文式命名var mingz…...
2024/4/19 7:34:55
java自学者的福音
谈到自学对于程序员来说并不陌生，自从我们离开校门就开始了自学之路。这一路上绝大部分都是百步止于九十步，不是因为他们不够坚持，而是没有找到学习的方法和资源。当然这一路上我也走得很辛苦，刚毕业后自学让我很迷茫很累，面对浩如烟海的学习资料无法选择，如果一一过目筛…...
2024/4/9 18:23:07
Android Studio中单元测试某个类中的一个方法
我们在使用Android Studio工具进行开发的时候，有时候会单独测试一个类中的一个方法，由于去运行整个项目会消耗的时间比较多，我们只想独立的测试这个方法，那么我们在AS中应该怎么做呢？大致在网上搜了一下，基本上全都是采用类似断言之类的。在AS中我们新建的项目，里面默认…...
2024/4/19 12:30:05
java web带进度条的大文件上传
解决方案方案名称：带进度条的大文件上传方案时间：2012-08-16 编写人员：yummy 开发环境：windowsXP+jdk1.6(注：jdk1.5编译不稳定,有问题!) 方案资料：解决这种大文件上传不太可能用web上传的方式，只有自己开发插件或是当门客户端上传，或者用现有的ftp等。 1）开发…...
2024/4/12 9:36:30

JD_M案例知识点（移动端）

# JD_M案例知识点

基础布局+顶部通栏+顶部轮播图+导航栏

知识点

技术点：less

less语法

js基础

1. 滚动后顶部通栏透明度

2. 倒计时

3. 轮播图

4. 注意

分类搜索页面(list.html)

1. 左侧滑动

2. 让代码的通用性更强

响应式+bootstrap

基本概念

技术的选择

其他

多媒体查询

bootstrap字体图标

前端框架

有一对预定义的代码

可以直接使用

也可以改参数使用

bootstrap

全局CSS样式

相关文章

最新文章