![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端H5
feifeiwuxian
这个作者很懒,什么都没留下…
展开
-
h5手机端video autoplay兼容苹果的做法
1.主要是加入x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline这几个属性。2.如果需要微信中支持,只能引入wx的js. 在//必须在weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener('WeixinJSBridgeReady',() => { ..原创 2020-12-24 15:38:20 · 1196 阅读 · 2 评论 -
h5卡片翻转特效
卡片翻转特效,在card 后面加上card-flipped即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st原创 2020-12-22 14:17:31 · 871 阅读 · 0 评论 -
vue 中背景图片加载完成后 做动画
<div ref="bg1" class="small-bg bg1" :class="showBig ? 'showBig' : ''" style="margin-top: -1px;" > </div><script>export default { name: "BrandPageNew", components: { TransitionAnimate, AboutSubTit...原创 2020-11-10 16:57:53 · 1025 阅读 · 0 评论 -
vue的作用域插槽使用
其实就是为了在使用插槽<slot>的时候拿到子组件中的数据,因为在使用的时候是有当前vue实例的作用域的,为了访问子组件的数据。原创 2020-09-23 15:47:26 · 221 阅读 · 0 评论 -
vuex的知识要点
1.先来一张图,由于官方的规范 ,都使用mutations去修改值。下图箭头代表了数据的流向。异步时使用Actions。 另外官方的devtools是通过Mutations去记录谁修改了。store里的代码import Vue from 'vue'import Vuex from 'vuex'import { INCREMENT} from './mutations-type'Vue.use(Vuex)export default new Vuex.Store({ s原创 2020-08-27 17:37:39 · 81 阅读 · 0 评论 -
彻底搞懂js闭包和节流防抖
节流和防抖的应用原创 2020-07-13 20:41:07 · 359 阅读 · 0 评论 -
elementUI级联选择器cascader可以选择任意一级选项收起
<el-cascader// 省略。。。。。。 ref="elcascader" @visible-change="elCascaderOnlick" @expand-change="elCascaderOnlick" ></el-cascader>elCascaderOnlick() { let that = this; setTimeout(function() { .原创 2020-06-10 11:46:50 · 1983 阅读 · 0 评论 -
小程序埋点方法
实现原理:通过在app.js中重写App与Page方法来得到小程序生命周期函数与各页面属性,并重新执行它们。代码如下://app.jsvar BiData = { wxApp: App, wxPage: Page, rewriteApp: function (e) { return BiData.wxApp(BiData.instrument(e)) }, rewritePage: function (e) { return BiData.wxPage转载 2020-06-03 14:47:31 · 1084 阅读 · 0 评论 -
快速搭建node服务器读取json文件模拟api接口数据
我这里把主要步骤列一下1.安装express框架npm install express --save -gnpm install express-generator --save -g2.创建项目express express_Server3.运行打开项目:cd express_Server安装:npm install启动项目:npm start4. 其它的一些跨域配置,和详情参考如下网站nodejs+express搭建服务器https://www.cnb原创 2020-05-27 17:14:39 · 600 阅读 · 0 评论 -
node.js不支持ES6的import export引发的思考
NODEJS 只实现了部分 ES6语法, import 就是没有被实现。所以目前还是只能用require导入,总体思想就是导入了整个module的exports属性对应的值。简单用法示例:var fs = require('fs'); //文件模块function readFile(src) { return new Promise((resolve, reject) => { fs.readFile(src, 'utf-8', function (err, d原创 2020-05-27 17:00:18 · 1313 阅读 · 0 评论 -
Vue-cli断点调试
在vue.config.js中加入如下代码module.exports = { // 开启调试 configureWebpack: { devtool: 'source-map' }}之后就可在如下地方打断点调试js代码了原创 2020-05-13 16:47:23 · 2335 阅读 · 0 评论 -
vue-cli+elementUI+项目报错处理+vscode用的插件
一、创建项目1.先用vue ui 界面创建一个项目。2.npm 安装在项目根目录执行npm i element-ui -S3.在 vue ui面板中搜索到element插件安装二、一些项目中的报错,和插件.我这边在做项目遇到了一些lint的报错1.1vue项目报错Expected indentation of 2 spaces but found 4找到以下的文件,添加"indent": ["off", 2]1.2还会有这种报错error: Newl.原创 2020-05-11 16:23:15 · 2745 阅读 · 0 评论 -
Vue脚手架的基本用法(命令操作+ui可视化操作)
1.命令行安装npm i -g @vue/cli2.查看版本号Mac-mini:webpackDemo xxx$ vue -V@vue/cli 4.3.13.创建项目vue create my-project4.选择方式手动,按上下键盘5.按空格选择安装哪些插件6.不使用历史模式路由。n7.放在些文件。选择单文件8.是否创建一...原创 2020-05-08 13:11:04 · 724 阅读 · 0 评论 -
Flutter导入别人项目报错
如果报如下类似错误Warning! This package referenced a Flutter repository via the .packages file that is no longer available. The repository from which the 'flutter' tool is currently executing will be used in...原创 2020-03-21 12:01:36 · 1175 阅读 · 0 评论 -
VSCode的一些技巧 (html提示css自动补全)
1.在html代码里提示css,自动补全安装插件 HTML CSS Support之后在class="" 这里写的时候可以就有提示了,或者直接写.开头。为了继续使用emmet语法,可以写完.提示css后,再ctrl + space自动补全emmet代码。2.想要在微信小程序wxml里提示wxss在设置里加入"css.fileExtensions":["css",...原创 2020-03-17 12:02:07 · 16350 阅读 · 0 评论 -
Flutter mac环境配置2020年
1.从 GitHub 上的Flutter repo获取源代码wangfeidembp:~ wangfei$ export PUB_HOSTED_URL=https://pub.flutter-io.cnwangfeidembp:~ wangfei$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnwangfei...原创 2020-02-21 22:50:13 · 2096 阅读 · 0 评论 -
小程序weui组件使用
1.在英文目录下。git clone https://github.com/wechat-miniprogram/weui-miniprogram.gitcd weui-miniprogramnpm run init上面可能有一些报错如下图,不过没影响,继续下面的npm installnpm installnpm run dev之后看到如下成功。生成的...原创 2019-12-27 16:31:52 · 1355 阅读 · 0 评论 -
js作用域和预解析
1 - 作用域1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:全局作用域 局部作用域(函数作用域)1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)...原创 2019-12-11 16:03:04 · 262 阅读 · 0 评论 -
JavaScript基础要点
1浏览器执行 JS 简介浏览器分成两部分:渲染引擎和 JS 引擎2JS的组成2.1 ECMAScript ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。ECMAScript:规定了J...原创 2019-12-11 10:18:09 · 145 阅读 · 0 评论 -
移动web开发之rem布局
1.rem基础rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size: 2rem;}rem的优势:父元素文...原创 2019-11-28 17:28:44 · 114 阅读 · 0 评论 -
css部分高级技巧
1.1 overflow 溢出(重点)检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。属性值 描述 visible 不剪切内容也不添加滚动条 hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 scroll 不管超出内容否,总是显示滚动条 auto 超出自动显示滚动条,不超出不显示滚动条 1.2 显示与隐藏总结属性 ...原创 2019-11-27 13:20:27 · 126 阅读 · 0 评论 -
外边距合并(内边距无效,外边距塌陷)解决
外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。(1). 相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距...原创 2019-10-25 09:59:31 · 1450 阅读 · 0 评论 -
CSS 三大特性
5.1 CSS层叠性 概念: 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 原则: 样式冲突,遵循的原则是就近原则。那个样式离着结构近,就执行那个样式。 样式不冲突,不会层叠 CSS层叠性最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。...原创 2019-10-17 14:58:27 · 148 阅读 · 0 评论 -
sublime快捷操作emmet语法
Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。1.生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成2.如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div3.如果有父子级关系的标签,可以用 > 比如 ul > li就可以了4.如果有兄弟关系的标签,用 ...原创 2019-10-17 11:30:36 · 259 阅读 · 0 评论