ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

开发前准备了解需求参加需求、交互、视觉会议，了解产品设计和项目成员。了解产品面向的设备和平台。了解产品对兼容性的要求以及是否采用响应式设计等。分析需求按需求结合现有技术，提出疑问和见解。提出可能存在的问题（技术实现，性能问题等），协商解决方案（如优雅降级、渐进增强）并达成共识。提出当下已掌握新技...

web前端开发规范的意义提高团队的协作能力提高代码的复用利用率可以写出质量更高，效率更好的代码为后期维护提供更好的支持一、命名规则命名使用英文语义化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！项目、目录、html/css/js等文件命名全部采用小写方式， 以下划线分隔。eg：my_project_namehtml/css/js文...

选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡 思路 之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件 小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度 小程序中的swiper组件中swiper-...

需求 微信小程序中如果判断页面滚动方向？ 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback])监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 {代码...} {代码...} 3.监听用户滑动页面事件 {代码...} 参考：微信小程序如何判断页面上下滚动

一个盒子包裹2个canvas以及文字盒子；盒子使用相对定位作为父级，flex布局，设置居中；一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"代码如下：

html2canvas可以通过纯JS对浏览器端经行截屏，但截图的精确度还有待提高，部分css不可识别，所以在canvas中不能完美呈现原画面样式

需求 最近项目中需要实现公告栏滚动显示效果如下 解决方案 1、 HTML 先建一个div层作为公告显示区，里面包裹一个公告列表(ul); {代码...} 2、 CSS 固定公告栏显示区域的高度（35px）,每条公告信息（li）的高度也必须是这个高度（我这里偷懒就用了行高），后面js中还要用到这个值。 {代码...} 3、 JavaScript 封装函数 no...

没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们“战略上藐视BUG，战术上重视BUG”！前端遇到的bug无非就三个方面结构层（HTML），表现层（CSS），行为层（JavaScript）。

CSS动画事件 CSS 动画播放时，会发生以下三个事件： {代码...} 注意标准语法都是小写，兼容大小写驼峰写法 {代码...} 语法 {代码...} 举例 {代码...} animationend 事件

特点 单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 {代码...} CSS样式 导航栏的样式要注意，这给当前样式单独做了一个DIV层，绝对定位，鼠标移动到哪个导航，这个当前样式层就移动到这个导航菜单上。 {代码...} JS方法封装 JS...

选项卡五花八门，今天又要用到选项卡，首选swiper！ 一、HTML布局 根据swiper官网的要求来class命名滑块。 {代码...} 二、CSS样式 随便写写，根据使用场景调整。（PS：推荐一个在线美化工具） {代码...} 三、Js封装 自己封装的选项卡函数swiperTab.js {代码...} 四、Js调用 首先引入相关js {代码...} 前端小白刚学JS。不...

一、HTML布局 首先写HTML布局 {代码...} 二、CSS样式 给点简单的样式 {代码...} 三、JS代码 1、面向过程 直接编写5行代码搞定 {代码...} 2、面向对象 JS改进，封装成吸顶函数 ceiling.js 方便以后直接Ctrl+C，Ctrl+V 封装方法 {代码...} 调用方法 {代码...} 这是最简单版本，欢迎大家在此基础上改进。 延伸 {代码...} {...

需求 做一个通用的弹出层提示框。要求：1.位置上下左右居中,2.只需要引入一个js文件，调用一下。不要html结构，不要样式表。 解决方案 方法封装 pupopTip.js文件 {代码...} 方法调用 {代码...} 效果图 完整代码

移动端网页最大的特点是什么？自适应不同尺寸的屏幕！高大上的叫法:响应式！知道了自适应网页怎么做岂不是能很好解决问题了？那么自适应网页怎么做呢？网上关于这方面的文章有很多，我简单的整理一下。

三目运算： condition ? expr1 : expr2 condition为真 执行 expr1 ；condition为假执行 expr2

在组件文件夹components下新建一个模板文件swiper.wxml。template 使用name属性，作为模板的名字（模板的唯一标识符，使用时用is属性声明）。然后在<template/>内定义swiper代码片段 ，代码如下：

当然先看官方文档 picker说明搞清楚基本概念“从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。”几个主要属性：range： 选取范围，数据类型为Array / Object Array，mode为 普通选择器 时，range 有效；value： value 的值表示选择了 range 中...