2021年9月
在微信浏览器自动播放audio
摘要： 一般安卓手机可以自动播放，但是ios和部分oppo机型无法自动播放，需要手动触发，所以需要分开处理 可以自动播放的机型，进入页面就自动播放，无法自动播放的机型，进入页面呈暂停状态 audio有play和canplay两个事件 可以自动播放时，会先触发play事件再触发canplay事件 无法自动播放 阅读全文
posted @ 2021-09-08 18:01 chicidol 阅读(724) 评论(0) 推荐(0)
2021年8月
vue-cli3.0使用rem适配移动端
摘要： 首先安装插件：npm install postcss-px2rem px2rem-loader --save 在src下新建utils文件夹，在utils下新建rem.js //utils->rem.js // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设 阅读全文
posted @ 2021-08-30 14:45 chicidol 阅读(276) 评论(0) 推荐(0)
解决vue页面之间滚动互相影响
摘要： 问题：比如在A页面滑动到底部，并点击按钮跳转到B页面，B页面如果也是长页面就会滚动到与A页面相同的位置 期望：进入B页面时，滚动位置为0 思路：在route->index.js页面，在路由配置页给B页面加上meta：{scrollToTop：true}，在scrollBehavior方法中判断met 阅读全文
posted @ 2021-08-04 17:31 chicidol 阅读(1029) 评论(0) 推荐(0)
2021年7月
页面加载优化篇2------“vue页面运行时，把所有的js文件全部加载了,不光如此,有的js文件还加载了多次”的解决方案
摘要： 问题：vue页面运行时，把所有的js文件全部加载了,不光如此,有的js文件还加载了多次 期望：只加载当前页面需要的js文件，且不重复加载 //vue.config.js module.exports = { chainWebpack: config => { config.plugins.delet 阅读全文
posted @ 2021-07-30 11:58 chicidol 阅读(1663) 评论(1) 推荐(1)
配置开发环境.env.development 和生产环境.env.production
摘要： //.env.development NODE_ENV = 'development' VUE_APP_BASE_API1 = '/localApi1' VUE_APP_SRC1 = 'https://abcd.com/' //.env.production NODE_ENV = 'producti 阅读全文
posted @ 2021-07-27 16:41 chicidol 阅读(3696) 评论(0) 推荐(1)
页面加载优化篇1------vue gzip优化页面加载速度，速度快一倍
摘要： 在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：npm i-D compression-webpack-plugin //vue.config.js const CompressionPlugin = require("compressi 阅读全文
posted @ 2021-07-27 15:35 chicidol 阅读(125) 评论(0) 推荐(0)
判断后端返回的图片地址是否可用，不可用就显示默认的图片
摘要： <img :src="!state?defaultimg:url" alt="" /> data(){ return{ defaultimg: require("@/assets/images/headimg.png"), url:'https://aliyun.com/', state:false 阅读全文
posted @ 2021-07-27 15:05 chicidol 阅读(320) 评论(0) 推荐(0)
监听网络状态，弹出网络异常提示语
摘要： data(){ return{ onLine: navigator.onLine, } }, mounted(){ window.addEventListener('online',this.updateOnlineStatus); window.addEventListener('offline' 阅读全文
posted @ 2021-07-26 18:30 chicidol 阅读(178) 评论(0) 推荐(0)
vue自定义指令directive，实现下拉列表数据太多时，分段加载
摘要： <template> <div class="content"> <el-select v-model="value" v-el-select-loadmore="loadMore()" placeholder="请选择"> <el-option v-for="(item,index) in lis 阅读全文
posted @ 2021-07-07 15:02 chicidol 阅读(276) 评论(0) 推荐(0)
post请求传'Content-type': 'application/x-www-form-urlencoded'格式的数据
摘要： qs传参时会把值为空的字段直接消失，不穿这个字段，会使请求失败，不使用qs可以使用下面这个方法 定义全局方法 //utils->utils.js export function objTostring (obj) { var str = ''; for (var key in obj) { str 阅读全文
posted @ 2021-07-02 16:17 chicidol 阅读(502) 评论(0) 推荐(0)