随笔分类 - 前端
摘要：animate.css 最有名的动画效果库 magic.css css 动画效果库 类似 animate.css popmotion 一个函数式声明前端动画库 NES.css 任天堂主题风格 css 库 particles.js 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能 Pape
阅读全文
摘要：1.普通滚动 <div class="info"> <transition name="slide" mode="out-in"> <div class="con" v-if="number == 0" key="money"> <div>发射心心得奖金</div> <div class="mone
阅读全文
摘要：1.文字渐变color:#DBA465; background-image: linear-gradient(to bottom, #fffefc 20%, #fdd050); -webkit-background-clip: text; background-clip: text; -webkit
阅读全文
摘要：display: flex; flex-wrap: nowrap; margin-bottom: 30px; margin-top: 15px; box-sizing: border-box; -ms-overflow-style: none; overflow: -moz-scrollbars-n
阅读全文
摘要：/** * covert canvas to image * and save the image file */ export const Canvas2Image = function () { // check if support sth. var $support = function (
阅读全文
摘要：原因：es6 不兼容 1. object.assign babel不会处理默认 npm install babel-plugin-transform-object-assign npm install babel-plugin-transform-object-rest-spread 2.项目第三方
阅读全文
摘要：引入sdk <script src="https://xxxx/xxx/jweixin-1.6.0.js"></script> var ctx = window; var param = {}; ctx.__mm_getWeixinSign = function(resp){ if (resp.ec
阅读全文
摘要：const path = require('path'); const cwd = process.cwd(); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const { getHtmlWebpackPlugins, getE
阅读全文
摘要：<template> <div ref="wrapper"> <slot></slot> </div> </template> <script type="text/ecmascript-6"> import BScroll from 'better-scroll' export default {
阅读全文
摘要：原文：https://github.com/zhongDZ/zhongdz.github.com/issues/37 这里收集了许多移动端上遇到的各种坑与相对解决方案 ##工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 io
阅读全文
摘要：系统自带webview里的注意点 1.IOS端:active不生效 常见效果长按按钮状态发生变化,比如切换src等，用:active再方便不过，可是可是。。。 解决方案：body标签里绑定个<body ontouchstart=""></body>,可写js绑定 2.IOS端:div,span,p.
阅读全文
摘要：1. -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果
阅读全文
摘要：手机共通问题 问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixel
阅读全文
摘要：<template> <div id="infiniteScroll" class="infinite-scroll"> <slot></slot> </div> </template> <script> /** * 用法： * 将该组件放在列表最下方，其直接父级元素为滚动的包含块 * window
阅读全文
摘要：1.锚点链接 2.document.getElementById(rewardid).scrollIntoView(); 3. Math.easeout = function (A, B, rate, callback) { if (A == B || typeof A != 'number') {
阅读全文
摘要：<template> <div id="root"> <nav-con id="nav" ref="nav" :title="'他们送上了祝福'"></nav-con> <div class="container" :class="{'container-ipx': ipx,'container-i
阅读全文
摘要：兼容问题： 如果元素定位在加了-webkit-overflow-scrolling:touch的容器上方时，如果上下滚动容器内容，定位的元素会跟着容器内容一起往上或往下滚动 iScroll是什么 很多场景，如果使用body的滚动会很不方便，这时候，就会使用某个元素的局部滚动，恶心的事情就会发生了。
阅读全文
摘要：// referenced: https://github.com/bedlate/vue-data-loading <template> <div class="vue-data-loading"> <div class="loading-header" :style="{height: pull
阅读全文
摘要：(function () { const ua = navigator.userAgent; const android = ua.match(/Android \d\.\d/); // const ios = ua.match(/iPhone OS \d.\d.\d/); const androidVersion = android && android[0].match(/\d.\d/) &&
阅读全文
摘要：html, body, ul, li, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } ::-webkit-scrollbar { display: none; } ul, li { list-style: none; } html { height: 100%; min-height: 100%; } b...
阅读全文
