- 博客(43)
- 收藏
- 关注
RSS订阅原创 vue中使用keep-alive缓存页面后无法更新数据
比如一个商品列表，点击某个商品进行编辑，去到编辑页中进行操作，编辑完成后再次返回商品列表编辑的商品还未更新。之前我们一般用mounted()或者created()进行初始化数据，keep-alive缓存后的组件只会执行一次mounted或者created的方法。解决方案：使用activated去代替created或者mounted。个人理解activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等...
2021-07-06 14:20:32
1000
原创 使用uniapp区分(h5,微信小程序)的正式环境，测试环境请求不同的apiurl
或许有更好的更优雅的代码，欢迎讨论var newBaseUrl = ''// #ifdef H5let proType = window.location.pathname == "pro生产表示域名等" ? true : falseif (proType) { // 生产环境 newBaseUrl = 'pro-apiurl'} else { // 开发环境 newBaseUrl = 'test-apiurl'}// #endif// #ifdef MP-WEIXINlet
2021-03-09 14:06:46
2860
原创 h5中video标签的层级变低，同层渲染问题（目前仅在qq内核浏览器试过）
1.在uniapp中使用video处理<video id="myVideo" class="video-player" :src="videoObj.video_url" :poster="videoObj.image" x5-video-player-type="h5-page"></video>2.在vue中使用腾讯播放器时使用（其他播放器差不多）动态添加x5-video-player-type// 使用腾讯点播sdk播放器// https://cloud.ten
2021-03-02 09:47:25
1023
原创 前端处理节流
throttleFn() { // 函数节流 let newTime = new Date().getTime() // 获取当前时间龊 let interval = newTime - this.oldTime; if (interval < this.throttle) return null; // 不执行任何操作 this.oldTime = newTime; // 赋值到data定义的值 // 剩余逻辑代码... }...
2020-12-23 18:52:05
233
原创 前端使用纯canvas生成图片不基于第三方插件
这是用vue框架生成的，使用其他的框架或者原生去写都是差不多，目前不处理兼容性问题，如果处理的话，添加个if条件查看用户设备是否支持canvas以及一些必要的属性吧~~~~mounted() { this.$axios({ url: '', baseURL: '', }).then(res => {// 接口获取的数据 this.posterCanvas(res) }).
2020-12-04 00:03:28
248
原创 解决微信小程序中使用canvas生成海报，安卓机可以，部分ios机型生成图片空白
我们使用canvasToTempFilePath()这个方法去生成临时路径的时候有的ios机型会出现空白的图片路径。比如iPhone6的机型（目前仅发现该机型生成失效）下图是iPhone6中用小程序canvasToTempFilePath() 生成的临时图片路径=================================================2.这一张是iPhone11中小程序canvasToTempFilePath()生成的图片---完成没问题，长按也可以保存ps：笔者用了P
2020-11-22 01:24:53
2531
原创 字符串切割成数组指定切割的字符长度
// 字符切割 getStrList(str, n = 24) { // str----字符串 // n----多少个字为一组 var strArr = []; for (var i = 0, l = str.length; i < l / n; i++) { var a = str.slice(n * i, n * (i + 1)); .
2020-11-14 23:04:06
219
原创 小程序请求基于Promise处理
新建一个http.js文件/** * 封装http 请求方法 */const BASEURL = 'https://*********'; //服务器api地址export const http = (params) => { const TOKEN = wx.getStorageSync('token') || ''; // 获取token var header = { "Content-Type": "application/x-www-form-u
2020-11-13 18:08:54
275
原创 基于calss封装一个websocket
写一个webscoket.js文件class WebSocketClass { constructor(url = '', webSocketError = 0, callback = () => { }) { this.instance = null; this.callback = callback; // 回调函数 this.wsurl = url; // ws路径 this.webSocketError = we.
2020-09-19 11:07:02
551
原创 设置element中DatePicker日期选择范围
<el-date-pickerv-model="eachrtsDateVal"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerO...
2020-08-17 16:05:29
239
原创 单个数组切割成二维数组
/** * 切割成二维数组 * @param arr 数组 * @param num 每个小数组需要的数量 */ getManyArr: function (arr = [], num = 5) { let len = arr.length; let lineNum = len % num === 0 ? len / num : Math.floor((len / num) + 1); let newArr = []; .
2020-08-05 17:28:38
415
原创 使用uniapp开发多端短视频（用swiper+video去实现）
1.首先我们封装video播放器 注意：video的层级进行修改在H5中要加入x5-video-player-type="h5-page"属性进行内核处理（目前仅在微信浏览器中处理过），微信小程序IOS的版的可以动态获取video的id进行createVideoContext操作，然而安卓机中并不行，安卓机仅支持一个video的ID去操作createVideoContext<template> <view style="height: 100%;" class="vid...
2020-07-14 15:15:06
5563
10
原创 终止forEach遍历
1.错误的执行方式newArr.forEach((v, i) => { if (v.checkType) { return false } })2，如果硬是想用return 去终止的话，可以用for循环去做3.正确终止方式newArr.forEach((v, i) => { if (v.checkType) {// 使用抛出错误，禁止往下执行
2020-06-04 15:21:48
704
原创 前端使用原生几十行代码js手写日历组件
只能传入每个月的一号，传入其他值会出现问题，到时做个判断即可// 返回 类似 2016-01-02 格式的字符串 formatDate: function(year, month, dateline) { let y = year; let m = month; if (m < 10) m = "0" + m; let d = dateline; if (d < 10) d = "0" + d;
2020-05-19 13:47:20
1189
原创 使用对象中的setter让页面响应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>setter</titl...
2020-04-15 15:48:52
167
原创 vue单页面在ios微信浏览器中首次跳转后页面底部会被微信导航栏遮盖住的问题解决方案
// 第一个是去掉默认微信导航栏// 第二个是重新再次获取高度 ，写死高度里面用 overflow-y: scroll去做滚动mounted() { // 只有微信浏览器中IOS系统才会出现的问题，由于导航栏的占了高度，所以要重新获取 setTimeout(()=>{ uni.getSystemInfo({ success:res => { ...
2020-03-23 11:20:19
2175
原创 用vue写单页面在ios上出现底部导航栏遮盖页面样式解决方案
pushHistory(); function pushHistory() { var state1 = { title: "title", url: "#" }; window.history.pushState(state1, "title", "#"); }
2020-02-20 14:01:50
1128
原创 video在安卓H5中层级最高的解决方案
<video class="video" :id="`video${videoId}`" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" @timeupdate="onUpdata" :enable-progress-gesture="false" :enabl...
2020-01-09 13:56:11
2576
原创 js设置手动刷新一次，使用的原因，页面进来第一次会报错或者IOS获取不到定位，影响代码执行
// 在js代码中第一行设置开关var histNum = sessionStorage.getItem("xxx") ? sessionStorage.getItem("xxx") : 0var histUrl = sessionStorage.getItem("hist") ? sessionStorage.getItem("hist") : window.location.href ...
2019-11-05 15:49:01
346
原创 高德地图简单使用--定位，地址经纬度互相解析，移动标点
<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="initial-sca...
2019-10-19 10:51:55
1381
转载 前端处理sku表格数据
function doExchange(arr, depth){ var dataArr = [ { sid:1, sname:'小米', fname:'手机' }, { sid:2, sname:'华为', fname:'手机' }, ...
2019-09-27 16:35:59
1000
原创 小程序基于wx.request做二次请求封装，主要是起到请求拦截作用
第一步建一个封装wx.request的文件const devUrl = "https://xxxxxx"; // 基准路径/** * * @param {路径} url * @param {请求方式} method * @param {数据} data * @param {请求头} header */function request(url, method = 'G...
2019-08-27 11:40:00
730
原创 自己封装小程序的路由拦截
第一步 我们创建一个拦截的文件intercept.jsfunction identityFilter(pageObj) { if (pageObj.onShow) { let _onShow = pageObj.onShow; pageObj.onShow = function () { wx.getSetting({ ...
2019-08-20 13:27:44
1670
原创 微信小程序批量收集formid
首先我们封装成一个组件起来，收集用户每一次点击的formid组件的wxml的部分<!--components/formId/formId.wxml--><form report-submit="{{true}}" catchsubmit="submitFormId" class='form'> <button form-type="submit" ...
2019-07-24 17:16:25
503
原创 js排序对象中a-z的排序，类似于微信code的加密方式
//排序的函数 arys---传进来的对象function objKeySort(arys) { //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组 var newkey = Object.keys(arys).sort(); //console.log('newkey='+ne...
2019-06-28 10:54:54
1136
原创 后台的返回的换行符在浏览器中不能编译处理方法
首选我们项目是一个供应商对分销商的项目,B2C吧在B端中供应商有使用的textarea来输入一部分东西用于分销商的展示textarea中的换行就会是/n 那么我们有部分浏览器不能解析编译，所以我们要使用replace这个方法进去替换使用下面这个方式即可， value.replace(/\n/g,"<br/>") 当中的value是后台给你返回的数据，...
2019-05-16 11:18:26
515
原创 vue项目打包优化大小的配置
首选项目我们是直接用vue-cli脚手架搭建的。我这个使用的vue-cli2.96的第一个先去掉默认生产的已map结尾的js文件，这个js文件差不多占了js文件夹一半的容量，所以没必要用到。 在config.index.build中找到productionSourceMap这个把默认的true改成false，那么打包后就不会再生产map结尾的js文件了...
2019-05-10 09:27:07
926
原创 JS表格导出，让每一个单元格都自适应内容的宽度。
首选讲下为什么要写让表格中的每个单元格都自适应宽度的，因为门店的同事不懂excel表格自适应宽度的功能，其实我也不懂excel，emmmm..........，所以老板就让我来处理了，宝宝心里苦但是说不出。首先我这边是用vue去写的项目写方法之前我们需要下载三个依赖包npm install -S file-saver xlsxnpm install -D script-loader...
2019-04-12 18:27:19
7476
7
原创 对象或者数组的深复制与浅复制的区别
深复制： 比如B复制了A，B修改了A则不会修改浅复制： 比如B复制了A，B修改了A也会跟着改变以上就是深浅复制的区别下面直接插入代码，深度复制直接暴力快速解决 let aaaobj = { name: '小老弟', age: 18 } /* *这里是深度复制aaaobj */ l...
2019-04-04 15:46:54
156
原创 原生自己上传文件，改变样式
效果图 代码：<div class="imgboxfix"> <div class="xianimgbox" v-for="(item,inx) in dataSet[xiancout].imgs" :key="inx"> <img :src=&quo
2019-03-08 14:36:04
550
原创 vue中出现数据更新了视图没更新的情况
比如我们视图中是动态绑定了类名<span class="tubiao" :class="{'activationtu':items.icontype}" @click="CouponCilk(inx,ix,items.icontype)">数据中的值 如果只是改变icontype去切换动态类名的话，我们则需要使用数组的splice方法去替换如一下代码：Cou...
2018-12-26 13:41:51
881
原创 在Vue中使用自己封装的方法，可通过this去使用方法，类似于插件的使用
第一种可以自己在main.js那里把方法挂载在Vue的原型链上------公共方法少的情况下可以这样么使用比如：// 这是main.jsVue.prototype.yuanxianliang = function (n){//yuanxianliang 是函数名 console.log('我是main中Vue的原型链',n)}// 组件的使用this.yuanxianlia...
2018-11-28 12:54:59
5094
2
原创 在vscode中点击右下角Go live 用本地服务器打开的方式出，解决跳到其他页面的方法
第一步打开设置第二步切换到工作区设置第三步修改文件夹名字会找到对应的index.html
2018-10-20 18:11:41
10381
原创 发送POST请求的时候，传递c查询字符串的时候，可以使用第三方插件qs
import qs from 'fs' //引入qs工具 //qs中stringify的方法是把json对象转换成查询字符串，有的后台需要传查询字符串的类型 let content = {name: 'jack', id: 1} let contentStr = qs.stringify(content) //qs中parse的方法是把查询字符串转出json对象，有的后台会方法查询字符...
2018-10-18 17:29:55
441
原创 前端本地测试写本地API接口
第一步下载全局包npm i json-server -g第二步下载好包后找到db.json文件里面的内容可以自己编写{ "list": [ { "id": 11, "products": ["胡萝卜", "白菜", "土豆", "豆腐", "青椒"] }, { &quo
2018-09-29 19:51:16
2012
原创 当form表单域中只有一个input的时候，默认按回车提交
<form @submit.prevent="addText"> <!-- @submit.prevent当表单中只有一个input的时候默认的是回车按键 --> <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="newtext">
2018-09-28 08:40:23
261
原创 JQ获取没选中的复选框的集合
//为选中复选框的数组 var chenum = $("[type='checkbox']").not(":checked")
2018-09-14 15:47:35
422
原创 使用iscroll插件没有滚动效果
起因:由于图片是网络上的图片，服务器那边获取的，不是本地资源，所有得要看用户的网速原因:因为图片还没加载好，就开始渲染插件了，会导致父元素没有高度，即不能滚动解决：等获取到所有图片并且加载好之后再去渲染插件的初始js 1.获取所有图片 2.使用load事件，资源加载完成如：以下代码的基本操作var conms = $(".right ...
2018-09-11 19:16:53
490
原创 MUI插件中a标签跳转的漏洞
起因：点击a标签不能跳转原因：mui组件中上拉或者下拉刷新组件中 a标签的默认行为被mui阻止了解决：使用js的方式来跳转，如以下代码 $("body").on("tap", "a", function () { location.href = this.href;}) ...
2018-09-11 19:09:38
369
原创 文本溢出变成省略号可多行
给需要隐藏文本的元素添加一下代码 display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 1;//这个1可以改变，改变的数值这是行数 -web...
2018-09-10 14:53:06
170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人