前言 上一篇面试的总结，大家看的还行，因为量很大，错误在所难免，希望大家发现错误了可以告诉我一声，我的邮箱是236490794@qq.com，一个小前端的希望。[https://user-gold-cdn.xitu.io/2018/9/11/165c77dc20eb8e22?w=255&h=255&f=jpeg&s=10510] 言归正传 我们老样子直接先上效果图再开始今天的分享 这个项目的github可以看一看 [https://github.com/qianbin01/toggle-menu][https://user-gold-cdn.xitu.io/2018/9/11/165c77dc20f0488d?w=386&h=678&f=gif&s=269029] 组件分析 1. 界面组成 2. 逻辑分析 3. 最终实现 界面组成从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落 .menu_container{

前言 最近公司事情比较少，正好早上有人问我那个滑动粘着头部不动的怎么实现，我想了半天，前几天刚刚写过，那就记录一下咯。于是，女朋友送了我一张图output_1536301166.gif [https://upload-images.jianshu.io/upload_images/13840515-0c2ebd4d4f960c3c.gif?imageMogr2/auto-orient/strip] 抛思路 其实思路还蛮简单的，监听容器div的滚动时间，及每个需要fixed的高度，滑到这个对应高度了，fixed住就行了。可能有点笼统，我们结合代码说吧。 今天我们从基本的template-script-style模式来贴代码好了 [图片上传失败...(image-444c6e-1536305058022)] TEMPLATE

老样子，我们先，哦不，今天我们直接上思路，没有效果图，真的没有image 我们依旧从界面及逻辑两块进行分析 1.界面上，只分成简单的两块，一块是上方的刷新文字，一块是下方的内容，然后将上方提示内容隐藏在屏幕之外，一般由两种方式，一种是上面遮一层，另一种是marginTop:负值将其弄出屏幕外，这里我采用的是第一种，代码也很简单，就随便贴一下 .header{ width: 100%; height: 1rem;这里的高度应该与刷新文字一样高 position: fixed; z-index: 100; } 2.功能实现的重头戏是在逻辑上，主要分成下面几个部分 * 监听事件 * 位置计算 * 控制界面变化 * 数据更新包 我一个一个进行分析，然后带你们入坑。

废话不多说先上成果图image 实现思路主要分界面与逻辑两大块 界面分为5个部分 * 左滑块长度 * 左内容位置 * 中间长度 * 右滑块长度 * 右内容位置 逻辑 * touch3个事件 * 各滑块长度及位置计算 * 选中时变色 具体实现步骤 1. 首先我们明白整个容器的长度是不变的等于左边+中间+右边所以我们可以通过先获取总的容器的宽度并用变量进行保存,这里我用的就是屏幕的宽度。 this.rangeWidth = document.body.clientWidth 1. 添加vue的三种touch事件

最近在开发小程序，尝试性地使用了一下 mpvue 框架。 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 mpvue同时维护了Vue和小程序的两套机制，因此需要对两套机制进行关联。这里主要对mpvue的生命周期来进行一些梳理。 微信小程序生命周期 首先我们需要了解，微信小程序的生命周期： App对象，主要有onLaunch, onShow和onHide。 Page对象，主要有onLoad, onShow, onReady, onHide和onUnload。 VUE到MPVUE mpvue的出现使得我们可以用书写Vue实例的方式去声明这两种对象，并使得Vue实例兼容小程序的生命周期。 Vue的生命周期主要体现在8个钩子：beforeCreate, created, beforeMount, mounted, beforeUpdate,

剧透：这次，D2Admin 带来了其它同类模板都没有的“花式”数据持久化功能，以及极少同类产品才有的标签页右键控制... 概述 D2Admin 7月份更新到了 1.1.5 版本 相关介绍 [https://juejin.im/post/5b5e5d3b6fb9a04f9244586d] ，8月份即将结束，首先还是按照惯例罗列本月比较重要的更新内容： 1.1.6 | 1.1.7 | 1.1.10 这三个版本分别新增和完善了多标签页控制的右键菜单功能 1.1.9 优化了多标签页数据持久化取值逻辑，现在修改路由信息后，刷新页面时数据从持久化存储取值时会多经过一部数据处理，根据 name 字段匹配新的路由数据 1.2.0 * 新版首页 * 全局状态管理模块化并且重新设计了 API * 全新的数据持久化 API * 数据持久化现在不仅仅支持区分用户，还可以区分路由 * 路由快照功能 * 文档重构 * 菜单支持跳转到外部链接 * 页面过渡动画设置加入全局状态管理并支持用户私有持久化 * $logAdd 和 $log 快速记录日志和打印日志，并提供演示页面

本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo 。 示例源代码 github [https://github.com/d2-projects/d2-demos/tree/master/combinable-questionnaire] 操作演示： 在左侧新建表单区块，选择区块标题和表单组件类型后点击确定，会在中间区域生成一个块新的表单，右侧展示了所有表单的数据合并结果。 在本示例中你主要可以看到以下知识点的运用： * vue.js 单文件组件， * 组件传参 * 自定义 v-model * 数据监听 * 数据合并 * 批量自动注册组件 * 使用 mixin 抽取公用代码 * sass 语法 * BEM 规范 * 尽量避免使用 for 循环的写法 * <component> 组件

时间过的真快，自从 1.1.4 [https://juejin.im/post/5b3b34f95188251ac9765c75] 发布又过去一个月了，这个月依旧每天在忙，D2Admin 也进行了大重构，先介绍一下这次的 1.1.5 相比 1.1.4 有哪些大的改变吧 ~ 重要升级 VUE-CLI3 D2Admin 这次完成了 vue-cli3 的重构，省去了以前繁琐的 webpack 配置，打包速度更快，环境变量设置更简单，文件目录更简洁。 D2-CONTAINER 组件重构 创建页面最重要的 d2-container 组件进行了重构，详见 页面容器 ，依旧是支持 full + card + ghost 三种模式，不同的是三种模式现在都分别支持 header 和 footer 插槽，并且都支持开关自定义滚动条，并且提供了滚动条设置的 props。 type="full"

github-banner 上图：好友不幸骨折，守着他编码...（希望他早点康复） 有天我和朋友说，感觉真是开源个项目，把自己整个人都开源了，一个人又要设计又要写代码又要写文档还要回答问题，除了上班吃睡就都是它了！ 但是就我个人而言，我感觉倒也是一种不错的体验

VUE-TS-DAILY 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址 [https://github.com/xiaomuzhu/vue-ts-daily] 欢迎star 项目演示地址 扫描二维码 建议直接添加到主屏幕(ios端体验差一些). 前言 为什么做这个项目？ 1. 学习vue全家桶，很长一段时间在用React。 2. 利用PWA技术来模仿原生应用,来探究PWA与原生的差异。 3. 作者声称2.5之后vue增强了对TS的支持，探究TS在vue中的支持情况。 那么为什么模仿一款"习惯养成APP"而不是饿了么、美团、头条等著名APP？

前不久发布了 vc-popup组件集 [https://github.com/deepkolos/vc-popup] , 但是那时候完全只是展示没有如何使用的教程, 因为当时急于发布出来, 实在不妥, 抱歉~ 既然是想自己东西可以让别人方便使用, 那就是打包成npm的包咯, 但是考虑 vc-popup 仅仅是popup的组件集, 不是完整的组件库, 所以很多时候用户仅仅想使用某个 popup , 那么其他 popup 也打包进去, 就浪费带宽了, 所以需要一个每个 popup 单独发布到npm上去, 但是把依赖分开的时候之后开发就是带来不便, 比如一个包更新了, 需要在另一个手动更新, 为了解决这个不便, 就是 Lerna 登场的时候了, 用来方便开发和管理多个 package ~ 但是自己实践的过程当中遇到一些问题和还有踩过一些坑, 所以在这里记录, 不过在开始之前, 先提一下 vc-popup 的更新

前言 之前看过很多的组件库, 但是它们的Popup行为和原生的界面差别不大, 但是行为上面却各种小细节不足, 所以有了这个强调 行为标准 的popup组件 特点 1. 支持 返回键 , 可以按浏览器返回按钮关闭popup 2. 可以写出小复杂的 过度动画 , 比如磁贴按压效果[在popUpMenu可看到] 3. 支持css动画库, 比如animation.css, 使用的时候自行添加依赖就好了 4. 提供了几个比较好的popup组件, calendar, picker, imgViewer 5. 行为定义相对标准 , 这一点比较重要的, 前端行为定义犹如算法的输入定义一样, 比如触发关闭之后, 结束动画未结束之前, popup会拦截输入事件, popup属于 不可交互状态 6. 拓展比较方便~, 之后会补充popup编写的教程~ 7. 差点忘说了, 强大的 定位支持 , 有 居中 , clickRelative , domRelative , 其中 domRelative 支持25个位置 8. Layer 都经过优化了, 层次合理~, 没有出现压缩层, 或者层爆栈的情况