-
vue:将px转化为rem，适配移动端vant-UI等框架(postcss-pxtorem)
1.下载lib-flexible 使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 <meta name="viewport"…- 1k
- 0
-
H5-vue与原生Android、ios交互获取相册图片
第一次写简书，比较忐忑，不足部分望简友批评指正，互相学习！ 功能需求：H5页面（vue）和移动端安卓、苹果进行交互，调取原生摄像头或相册上传照片； 需求分析：1.移动端获取H5页面的点击事件 2.移动端进行拍照或者是选取照片上传服务器获得图片路径（h5不用管）3.H5获取移动端传值方法获取图片的路径 下面进行正题 第一步：H5正常定义点击事件 ps：括号中的123参数，是为了区分身份证的正反面，同…- 907
- 0
-
移动端常见问题解决方案
一、特殊样式 css3盒子模型 box-sizing:border-box; -webkit-box-sizing:border-boxx 清除点击高亮，设置transparent 完成透明 -webkit-tap-highlight-color:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面时的弹出菜单 …- 935
- 0
-
移动端H5通过flexible.js+rem自适应适配方案
一、 rem实际开发适配方案 (1)按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值; 技术方案1 技术方案2 媒体查询 flexible.js rem rem less vscode插件cssrem 总结:两种方案都可以，一般推荐第二种方案，更简单操作 二、简洁高效的rem配…- 1.1k
- 0
-
touch.js的使用总结
Touch 手机端的操作 基本事件： touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时触发 touchcancel //触摸过程被系统取消时触发（少用） 一、事件绑定 touch.on(element,types,callback); 参数描述： element element或strin…- 887
- 0
-
Touch 移动设备上的 手势识别 与 Js事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。 Touch.js手势库专为移动设备设计。 Touch.js对于网页设计师来说，是一款不错的辅助工具，可以减少很多写框架控制器的时间。 网页合理使用Touch.js不但能增加网页的美观感，而且在节约时间，减少人力投入也有极大的帮助。 Touch.js官网： https://www.a…- 2.1k
- 0
-
dragula插件web端和移动端的拖拽排序
Dragula简介 Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。 代码演示： <script src="dist/dragula.js"></script> <link rel="stylesheet" hre…- 1k
- 0
-
移动端实现拖拽的两种方法
移动端的项目经常会引入手势库来实现拖拽 不过如果只是一两个页面用到拖拽，再引入一个手势库就很不划算 最近的项目中就有这么一个需求： 因为就这一个地方需要拖拽，所以我就没有引入第三方库 移动端的拖拽有两种主流的实现方案： 1. 将元素设置为固定定位，然后在拖拽的时候修改其定位，实现拖拽的效果； 2. 使用 transform 中的平移 translate 属性实现拖拽。 方案一：固定定位 fixed…- 1.1k
- 0
-
Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代，如今已发展到前后端分离，这种开发方式大大提升了前后端项目的可维护性与开发效率，让前后端工程师关注于自己的主业。然而在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)因为首屏需要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这造成了白屏，如果白屏时间过长，用户体验会大打折扣，如果用户网速差，则FCP会更长。 由此…- 935
- 0
-
伪元素的妙用–单标签之美
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 CSS2及CSS3伪类区分 CSS3伪元素单双冒号区分 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。 1 #…- 986
- 0
-
Flutter 2020：跨平台状态
已兑现承诺 Flutter cross-platform promises: mobile, web, and desktop Flutter是Google支持的跨平台框架，可实现跨平台软件开发。 这意味着Flutter应用程序可以从一个代码库开发，构建并部署在多个平台上。 承诺 单一的代码库承诺非常诱人。 您可以用更少的资源，更少的时间，有时甚至是更少的技能（而不是更少的技能）来始终如一地&qu…- 1k
- 0
-
前端开发，如何优雅处理前端异常？
前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。 一、为什么要处理异常？ 异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。 增强用户体验；远程定位问题；未雨绸缪，及早发现问题；无法复现问题，尤其是移动端，机型，系统都是问题；完善的前端方案，前端监控系统； 对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接…- 922
- 0
-
vue-cli3项目搭建配置以及性能优化
项目初始化 注意：安装前请确保有安装node.js，并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本，查看vue --version 创建项目 vue create vue-cli3-init(项目名) 注：名称不能采用驼峰 vue-cli3也可以采用UI面板进行配置，相对比较方便，目前先写命令行创建，后续再加上面板创建。 …- 760
- 0
-
vue项目移动端、pc端适配方案
vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible和 postcss-px2rem（命令行安装） npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包的用途： flexible会为页面根据屏…- 1.6k
- 0
-
vue-cli3项目搭建配置以及性能优化
vue-cli3项目搭建配置以及性能优化 在之前的开发中主要用的是vue-cli2，最近空闲时间比较多，接下来有新项目，本着偷懒的本能，自己打算搭建一个基础包以备后期开发应用，并对其进行性能优化和配置 搭建整个过程如下： 初始化项目 修改目录结构 多环境运行 axios封装 模块化vuex 全局引用样式 移动端适配配置 常用util 引入第三方UI框架 配置vue.config.js文件 vue项…- 813
- 0
-
vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目，不得不提打开微信浏览器内置地图导航的功能确实有点恶心。下次想起来了的话，进行总结分享一下如何处理。在vue移动端h5页面当中，其中适配是经常会遇到的问题，这块主要有死个方法可以适用。 方法一：引入淘宝开源的可伸缩布局方案 引入淘宝开源的可伸缩布局方案：https://github.com/amfe/lib-flexible 淘宝的其实也和viewport的…- 822
- 0
-
跨平台技术演进及Flutter未来
一、移动跨平台技术演进 1. 引言 移动互联网发展十余年，伴随着 Android、iOS 等智能手机的不断普及，移动端已逐步取代 PC 端，成为兵家必争之地。正所谓“得移动端者得天下”，移动端已成为互联网领域最大的流量分发入口，一大批互联网公司正是在这大趋势下崛起。 2. 为什么需要跨平台技术 伴随着移动互联网的高速发展，公司间竞争越来越激烈，如何将好想法快速落地、快速试错，成为备受关注的问题。提…- 2.8k
- 0
-
自适应和响应式的区别
前言 “自适应设计和响应式设计的区别”是个老生常谈的问题，在这里将更加直白的来介绍它们之间的不同之处。 视窗 先来了解一个概念（下文中经常出现）： 视口：用户浏览信息屏幕尺寸大小（每一个视口后面都是真实一位的用户） 概念： 响应式设计（Responsive design）： [百科]：响应式设计是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端—…- 1.1k
- 0
-
Vue移动端 Web App 点击穿透问题解决方案
描述 在近期的一个移动端项目中，有一个页面需要有弹框提示，并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。代码如下： this.myScroll = new IScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: tr…- 835
- 0
-
2019年Web前端行业发展的5个新趋势
IT行业发展迅速，瞬息万变，2019年前端行业又有哪些新趋势呢？ 1.新规范的更新与稳定 前端新标准和草案在不断更新，HTML、CSS、Javascript标准也在渐渐完善，尽管这些新的规范最终会淘汰旧的规范，新的项目也会以最新的标准作为开发依据，但要完全废弃旧规范，还需要一段时间。 目前前端三层结构实现已经形成了HTML5、CSS3、《Ecmascript 6》标准规范，后面的新变化也会越来越小…- 1.6k
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×