2018年12月_zhaohanqq

原创 vue

MarkDown支持html语法marked.jsmarked是一个markdown 解析、编译器以下代码是如何将md文件转为htmlimport marked from 'marked'let renderMD = new marked.Renderer();let index = 0;renderMD.heading = function (text, level) { ...

2018-12-29 19:06:47 177

原创 jq下拉刷新（安卓微信浏览器实现刷新）

安卓微信浏览器下拉会露出域名等信息，这样就会影响下拉刷新，如果阻止微信浏览器下拉，那正常的move也会失效，然后想了一个方法，如果是安卓微信浏览器，则换种操作方法：当scrollTop为0时，先上划一点再迅速下拉就可以实现刷新，代码如下var startY, mY, topScroll, refreshFlag = fals...

2018-12-27 14:56:01 374

原创 H5缓存机制

做过返回页面定位的功能，因为带分页，所以用了缓存sessionStorage，请见博客，然后顺便又了解了其他的缓存机制。一、消除缓存//方法一修改请求header头，比如php添加：header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");header("Cache-Control: no-cache, must-revalidate");hea...

2018-12-25 16:52:14 193

移动端项目有一个功能是要展示很多列表，需要分页展示，虽然之前用过better-scroll插件，但是这次我想自己写。首先在获取滚动轴高度、文档高度、屏幕可视区域高度时出现兼容问题：//滚动轴高度var scrollTop = $(document).scrollTop() || window.pageYOffset || document.documentElement.scrollTop ...

2018-12-24 16:37:04 491

原创移动端长按屏幕取消选中文字

项目中要求长按屏幕弹出对话框，不能选中文字，可以设置css样式* { -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; ...

2018-12-24 15:39:58 2064

原创 jq封装蒙层小插件，蒙层滑动页面不滑动

var bodyEl = document.body;var tops = 0;关闭模态框bodyEl.style.position = ‘’;bodyEl.style.top = ‘’;window.scrollTo(0, tops);蒙层出现tops = window.scrollY;bodyEl.style.position = ‘fixed’bodyEl.style.to...

2018-12-22 22:47:38 266

原创 webpack自动化构建工具

webpack官网电脑已经安装了git和node主要是：入口（entry）输出（output）解析器（loader）插件（plugins）1/ npm（包管理工具）全局（-g）安装webpack和webpack-cli（命令行接口）npm install webpack webpack-cli -g2/ 初始化当前项目npm init在项目文件夹中生成 package.js...

2018-12-21 18:15:22 542

原创 vue源码初级解析（数据代理、模板解析、数据绑定、双向绑定）

一、数据代理实现数据代理的核心就是 Object.defineProperty()方法，而IE8及以下是不支持该方法的，所以vue不能用在IE8及以下。回归正题，data里的属性可以直接vm.xxx，那是因为用defineProperty方法将data中的属性增加到vm上了，主要代码如下：Object.keys(data).forEach(function (key) { var me...

2018-12-20 21:46:34 172 2

原创 vue 实现购物车

<template> <div> <div class="shopcart"> <div class="content"> <div class="content-left" @click="toggleShow"> &l

2018-12-16 12:46:35 254 1

转载 backdrop-filter高斯模糊

backdrop-filter是在Filter Level2提出来的。这是一个实验技术，其取值和filter Level1中filter属性的属性值一样，包括：blur()urlbrightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()效果如下：...

2018-12-16 12:42:58 1699

转载给伪元素的css属性动态赋值以及获取css属性值

一/ 设置值就是动态添加style$('head').append($('<style class="styleBefore">.leveltwo-scroll::before{height:' + domRight + 'px;}</style>'));二/ 获取值#leveltwo-scroll::before { content: '...

2018-12-15 10:47:57 2909

原创 vue路由query和params的几种传参方式

在项目中需要路由传参，查看了官方文档以及参考了网上其他资料，现总结如下：一/ params传参占位符:id//声明式&amp;amp;amp;lt;router-link :to=`/home/${name}`&amp;amp;amp;gt; //编程式skipMethod (name) { this.$router.push(`/home/${name}`); //或者 this.$router.pu...

2018-12-14 11:40:08 454

原创 vue基于better-scroll制作左右联动滑动页面

界面如下：vue模板&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;goods&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;menu-wrapper&amp;quot;&amp;

2018-12-13 14:57:23 1427 4

原创 Vue.set()

给state中的一个对象添加新的属性，要用Vue.set()，否则数据更新不会展示到页面上，用法如下：Vue.set(food, 'count', 1) //food是对象，count是属性，1是值

2018-12-13 14:34:21 208

原创 better-scroll不滚动/连续两次触发点击事件等问题的解决

一/ 不滚动一般我们自己做滚动都是这种结构&amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt; &amp;amp;lt;-- 需要滚动的内容 --&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt;会将高度等样式设置在“.content”元素上

2018-12-12 19:31:54 5062

转载用正则实现金额千分位用逗号分隔的方法 JS

var a = 222122122.6754; var b = a.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');//使用正则替换，每隔三个数加一个','

2018-12-11 10:28:44 4015 1

原创 html页面传值的querystring方式的注意事项

一/ 带有中文，需要编码解码从一个页面到另一个页面location.href = 'XXX/XXXX?code=赵晗'页面接收该参数时会乱码解决办法：发送时编码encodeURIComponent，接收时解码decodeURIComponent，在工作中我发现发送时不用编码，只要接收时解码就可以//获取从清单页面传过来的参数并做判断 $(function () ...

2018-12-10 20:57:10 1251

原创 vue 父组件调用子组件的方法

一般情况，我们从父组件向子组件传递数据会用props，子组件事件想在父组件中执行可以用$emit。现在父组件想用子组件里的一个方法，那怎么办？在父组件里首先得得到子组件对象，点的方式就可以使用子组件方法了，那如何得到子组件对象，必须用ref，简单例子如下：&amp;lt;-- 子组件Food --&amp;gt;methods: { toggleFood () { this.showFo...

2018-12-10 11:36:44 422

原创 vue 在某些情况下数据使用前须判断是否有值

从商品列表到商品详情页时，要异步请求数据info，代码如下：<div class="shop-header-discounts"> <div class="discounts-left"> <div class="activity" :class="supportClasses[info.supports[0].type]"> &a

2018-12-08 10:08:51 3762

原创 $nextTick() Swiper轮播组件

在vue中使用Swiper轮播组件，最先想到的是在watch中new一个Swiperwatch: { categorys(value) { new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }...

2018-12-06 19:55:57 766

原创 vue映射函数mapState mapActions mapMutations mapGetters

通过扩展运算符，将store里的state/actions/mutations/getters的属性或者方法直接映射到当前vue对象的this上，使用时直接this.xxx

2018-12-06 18:42:47 719

原创使用Promise、axios封装ajax异步请求

先上代码import axios from &amp;amp;quot;axios&amp;amp;quot;export default function ajax(url, data = {}, type = 'GET') { return new Promise(function (resolve, reject) { let promise; if (type === 'GET') { ...

2018-12-04 12:26:49 2460

原创 Postman

Postman提供了独立的安装包，不再依赖于Chrome浏览器了。同时支持MAC、Windows和Linux，安装非常简单官方下载地址首页先简单测试了几个后台接口，以后需要再慢慢研究：首先准备json文件点击“import”按钮，将json文件拖入测试...

2018-12-03 14:37:45 123

转载在浏览器上安装 Vue Devtools工具

安装教程

2018-12-01 17:11:06 503

原创 vue-cli 3.0 脚手架配置记录

一/ 在2.X中静态资源文件放在static文件夹中，此文件夹里的东西不会被webpack打包，而在3.X中没有该文件，于是我在根目录新建了一个static文件夹存放reset.css文件，出现了在index.html引入reset无效的问题，经过查资料发现3.X中的public文件夹类似于2.X里的static，最终把reset文件放入public文件夹中成功引入注意：public文件夹下的...

2018-12-01 15:01:28 215

zhaohanqq的博客