![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
檀小泡泡
希望大家多多的点赞点赞,评论
展开
-
js 监听手机端键盘弹出和收起事件
本文转自:https://www.cnblogs.com/shimily/articles/12197217.htmlconst ua = typeof window === 'object' ? window.navigator.userAgent : '';let _isIOS = -1;let _isAndroid = -1;export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad转载 2020-12-29 15:57:39 · 2152 阅读 · 0 评论 -
在VUE中使用vueQr
直接在组件中引用:html:<vue-qr :text="qrcodeSrc" size="400" :logo-src="srclogo" :logo-scale="200" style="height:170px;width:170px;"></vue-qr>js:import vueQr from 'vue-qr'data(){ return:{ sr...原创 2020-03-11 21:19:04 · 665 阅读 · 0 评论 -
js获取手机宽度,高度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:do...转载 2019-12-04 16:42:16 · 1071 阅读 · 0 评论 -
vue swiper animate如何使用
先安装:npm install animate.css --save上代码:main.js:import animated from 'animate.css'Vue.use(animated)HTML:<div class="ani" swiper-animate-effect="bounceInDown" swiper-animate-d...原创 2019-12-03 18:05:23 · 2915 阅读 · 9 评论 -
swiper的使用 在vue中
swiper的安装与使用:https://github.com/surmon-china/vue-awesome-swiper以下代码转自:https://www.cnblogs.com/scale/p/9294516.html(链接里面有详细解释步骤)代码:main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import...转载 2019-11-21 14:58:20 · 217 阅读 · 0 评论 -
类似易企秀的UI框架 整屏滑动
swiper.js和fullpage.jsswiper:可以适用VUE框架,官网:https://www.swiper.com.cn/安装及使用:https://github.com/surmon-china/vue-awesome-swiperSwiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站...原创 2019-11-20 10:34:24 · 1377 阅读 · 0 评论 -
在VUE中使用QRCode.js
转自:https://www.cnblogs.com/cuixiaozhen/p/9872307.html什么是QRCode.jsQRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系。VUE里安装QRCode.js包npm i qrcodejs2VUE中引入qrcodejs2...转载 2019-11-14 16:06:28 · 1292 阅读 · 0 评论 -
Mint infinite-scroll上下滑动翻页
1 设置v-infinite-scroll的元素在循环元素外,2 updated之后再设置 this.loadingBuild = false,在渲染前设置为false会让程序一直触发loadMore函数。3 参数“infinite-scroll-disabled”监控的是设置该参数的元素的长度。在加载完条目后,铺不满页面会触发loadMore函数。<div v-infinite-sc...原创 2019-10-21 17:11:35 · 392 阅读 · 0 评论 -
移动端--搜索框
<div class="searchClass"> <form action="javascript:void 0" style="text-align: left;"> <input type="text" class="inputClass" v-model="searchVolumn" placeholder="请输入编...原创 2019-09-26 14:46:30 · 2296 阅读 · 0 评论 -
background-image移动端的兼容性
不识别方位词:top等 background-image: -webkit-linear-gradient( 0deg,#CBB9E8 0%, #9DB5FC 100%); /* Safari 5.1 - 6.0 */ background-image: -o-linear-gradient(0deg,#CBB9E8 0%, #9DB5FC 100%); /* Opera 11.1 - 12....原创 2019-08-15 09:48:08 · 1960 阅读 · 1 评论 -
html progress标签的样式设置,progress后紧跟数字长度样式
progress标签的样式设置比较不好找:饿了么的mintUI的mt-progress不能设置max,坑不坑。.preventCons progress{ width: 51%; border-radius: 43px; /*color:#5E72E4;*/据说是ie兼容 /*background: #5E72E4;*/据说是个什么兼容 } /* 表示总长度背景色 */....原创 2019-07-22 18:06:58 · 3589 阅读 · 0 评论 -
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别1.touch事件以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发touchcancel: //系统取消touch事件的时候触发,这个好像比较少用每个触摸事件被触发后,会生成一个event对象2....转载 2019-07-16 11:30:06 · 1793 阅读 · 0 评论 -
解决 flex align-items:center 无法居中(微信小程序)
转自:https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛因为最近再做小程序,需要用到flex布局,因为写惯了web项目,初次学习确实感弹性布局的强大(关键是不用再管可恶的ie了)。但是也遇到了align-items:center无法居中的问题,想了很久终于找到了解决办法。解决方法:1.确定好自己的主轴方向是不是row,如果是co...转载 2019-07-16 09:38:06 · 12698 阅读 · 2 评论 -
移动端前端开发:移动web页面前端开发总结
在移动端开发网页就基本不用考虑这种浏览器间的兼容问题了,手机上的浏览器绝大部分是webkit内核的,所以在移动端网页开发的时候能用到很多新的特性,像是极大简便了页面布局的flex布局,还有各种语义化的标签等。但是由于移动端手机的尺寸种类繁多,所以在这方面要下点功夫,举个最简单的例子就是一行本来是能显示3个目标的item但是在某些小尺寸的手机上只能显示2个。其他还有一些细微的区别例如js库的选择(p...转载 2019-05-12 22:53:59 · 1170 阅读 · 0 评论