随笔分类 - 移动端
摘要：1. 现在安装的脚手架vue-cli是4.4了，vue-router也是4.x, 现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了，router当中的一些东西变
阅读全文
摘要：转载连接：https://blog.csdn.net/feifanzhuli/article/details/90489488 vue与better-scroll作者文档：https://zhuanlan.zhihu.com/p/27407024 中文文档：https://better-scroll
阅读全文
摘要：1，热销组件开发 注，关于开启flex，flex子项开始省略号样式不生效情况，需要在flex:1的子项添加min-width:0,省略号即可生效 原因 flex: 1的用处 在一个大的div中已知一个或多个内部div元素的宽度 为某个未知宽度的div元素设置flex:1 将沾满剩余空间 一般情况下，
阅读全文
摘要：一，利用FastClick第三方插件来解决移动端click事件300毫秒延迟情况 1，安装，npm i fastclick -S 在main.js中引入 import FastClick from "fastclick"; FastClick.attach(document.body); 2，安装s
阅读全文
摘要：今天用webpack打包项目，安装了less-loader模块之后报错，如下图： 原因： less-loader安装的版本过高解决方案： 1.npm uninstall stylus-loader2.npm install stylus-loader@3.0.2 --save-dev
阅读全文
摘要：一， 在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms
阅读全文
摘要：注意： better-scroll会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上click：true。 同时，在PC上或某些手机端，由于未成功将touchend事件move掉，点击事件会执行两次。 better-scroll派发的event事件和原生js的event有属性上的区别，其
阅读全文
摘要：better-scroll是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。 实现原理：父容器固定高度，并设置overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。 立即使用： <body> <div id="wrapper" ref="wrap
阅读全文
摘要：对于iphone6，宽度正好适配，但是对于iphone5,宽度就不够，需要做下媒体适配 .overview-left flex: 0 0 137px padding : 6px 0 border-right : 1px solid rgba(7, 17, 27, 0.1) text-align :c
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：什么是Sticky Footer？页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。 当内容较少时，正常的文档流效果如下图 在正常的文档流中，页面内容较少时，页脚部分不是固定在视窗底部的，这时就要用到Stickyfooter布局。 Sticky f
阅读全文
摘要：filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 样式， 给header设置绝对行为，给图片设置相对定位，图片的z-index设置为最低， filter属性设置图片饱和度 效果 不设置filter属性
阅读全文
摘要：1.准备2x,3X图片，在vue项目中的assets中新建stylus文件夹，新建mixin.stylus 适配图片 //关于2X,3x图的兼容 bg-image($url) //正常情形 background-image: url($url + "@2x.png") // 3X图时 @media
阅读全文
摘要：1.已经运行了的webApp项目 在终端查看本机ip ipconfig , 查看本机ip地址， 打开草料二维码网站，https://cli.im/ 将localhost:8080/#/sellers 换成http://192.168.0.235:8080/#/sellers地址 将项目地址生成二维码
阅读全文
摘要：在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。 本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经解。 产生原因 设备像素比：dpr = window.device
阅读全文
摘要：点击穿透 touch 事件结束后会默认触发元素的 click 事件，如没有设置完美视口，则事件触发的时间间隔为 300ms 左右，如设置完美视口则时间间隔为 30ms 左右（备注：具体的时间也看设备的特性）。 如果 touch 事件隐藏了元素，则 click 动作将作用到新的元素上，触发新元素的 c
阅读全文
摘要：移动端事件 事件类型 移动端事件列表 touchstart 元素上触摸开始时触发 touchmove 元素上触摸移动时触发 touchend 手指从元素上离开时触发 touchcancel 触摸被打断时触发 这几个事件最早出现于IOS safari中，为了向开发人员转达一些特殊的信息。 应用场景 t
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：getComputedStyle getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法 const demo = document.getElementById('
阅读全文
摘要：移动端开发 相关概念 在学习移动端之前，我们先来学习一些基础的概念和专有名词，这些知识会在以后的面试、工作沟通中经常用到。 屏幕相关 1.屏幕大小 屏幕大小是指屏幕的对角线长度，单位一般是英寸(inch)。常见的手机屏幕大小有： 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等，英
阅读全文