Mrswater的博客

原创 在Vue中是用wow.js实现动画

1，首先先安装wow插件 它依赖animate.cssnpm install wowjs --save animate.css会自动安装 ，然后在main.js引入animate.css2，在需要用的页面引入wow.js3，在页面加载完的时候mounted里面初始化wow实例4，需要用动画的一定加上类名wow，以下是wow.js中各种特效对应的类名...

原创 cookie

setCookie (cname, cvalue) {var d = new Date()d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000))var expires = 'expires=' + d.toUTCString()document.cookie = `${cname}=${cvalue};${expires};path=/...

原创 element-ui $messageBox 放图片

原创 mixin.stylus

// 背景图片bg-image($url)background-image: url($url + "@2x.png")background-position: center centerbackground-repeat: no-repeatbackground-size: 100%@media (-webkit-min-device-pixel-ratio: 3),(m...

原创 移动端对于@2x和@3x图的使用

// 背景图片bg-image($url)background-image: url($url + "@2x.png")background-position: center centerbackground-repeat: no-repeatbackground-size: 100%@media (-webkit-min-device-pixel-ratio: 3...

原创 vue中用swiper轮播框架loop：true时点击事件失效的解决方法

问题描述：swiper轮播是可以点击去查看详情的，swiper的loop属性是true，当我们点击第一张图片和向左滑动到最后一张点击时触发不了事件的原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。解决办法：就是不使用vue中的@：click进行操作，...

原创 swiper loop:true失效

问题描述：在写vue项目的时候轮播用到swiper插件，里面有一个loop属性设置为true时，会循环轮播，一开始是自己本地模拟的数据是可以实现的，但是当调用接口获取来的数据发现并不能循环播放原因：本地模拟的假数据是一直存在的，而后台获取的数据，页面dom一开始渲染的时候数据是为空的，所以导致不能循环播放解决办法：当获取到数据的时候再渲染dom生成即可...

原创 h5页面中固定在底部的导航跟随着键盘移动

问题描述：在有底部导航的页面里，如果有哦输入框，当输入框获取焦点的时候，键盘就会被弹出来，由于这时页面的高度变化了，定位的导航位置也会变化，所以这时我们的底部导航会出现在键盘的上面，如下图：解决方法：根据页面的可见区域高来控制它是否显示效果如下...

原创 vconsole 移动端的调试工具

问题描述：平时开发web项目的时候，我们可以使用console.log去输入一些有用的信息，但是在移动端上面我们没法打开控制台去查看，当然也可以用alert弹出框，但是这个用着不怎么方便，这时候我们可以用调试神器Vconsole第一步：npm install vconsole 安装第三方插件第二步：在main.js入口文件中引入，如果是开发环境的话，就输出，生产环境就不输出，这样就不用来回...

原创 使用手机查看vue写的本地页面

问题描述：当我们用vue写移动端页面的时候，通常都是在浏览器下的手机模式下查看，当我们需要用手机查看演示页面的时候，就需要接下来的一系列操作了，第一步：在终端输入ipconfig 查来的IPv4地址就是我们所需要的然后将config/index.js 里面的host改为这个ip地址 通过http://172.29.95.145:8080就可以在手机端和电脑端进行查看 但是当我们的ip变化的...

原创 从后台获取的富文本，将里面的px转化为rem的方法

原创 常用的js方法，比如检验手机号、邮箱、空对象、空值等等

// 检查手机号码// 检查邮箱// 正则表达式// 检查对象里面是否有空值// 检查值是否为空// 地址栏截取参数值//路由跳转，返回上一个页面，关闭微信当前页面// 获取时间戳和32位字符串...

原创 input输入框失焦处理兼容IOS

原创 改变当前地址栏的url，以openid为例子，将openID这个参数去掉

changeUrl () {// 先获取到当前地址栏中的urllet currentUrl = location.href// 找到 openid= 的位置let openidIndex = currentUrl.indexOf('openid=')// 找到 openid= 之后 的第一个 & 的位置let openidLastIndex = current...

原创 截取地址栏参数

function queryUrl(key) {let name, valuelet str = location.hash // 取得整个地址栏let num = str.indexOf('?')str = str.substr(num + 1) // 取得所有参数let arr = str.split('&') // 各个参数放到数组里let json = {}...