![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端开发
文章平均质量分 54
ze1024
一起学习,一起进步
展开
-
小程序swiper轮播图跳转,返回时变成第一页
背景小程序里面经常有轮播图功能,有的还可以跳转内页.我一般使用小程序内置组件swiper实现这功能.如果想实现轮播图跳转其中内页,返回时变成第一页.实现思路通过swiper属性和方法实现实现代码 <swiper class="rotation" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{s原创 2021-09-30 10:18:57 · 2344 阅读 · 0 评论 -
SyntaxError: Unexpected end of JSON input
小程序里面 SyntaxError: Unexpected end of JSON input报错怎么解决问题背景小程序,经常有跳转传参的功能,一般带一个id或者name,title之类很短的字段,但是如果带很多数据的话,很多人喜欢使用json转换,传一个对象过去小程序传参但这样仅限于不是很多的字段,不然就会出现如下图错误产生原因这是因为navigateTo方法携带的参数是有字符串长度限制的,超出部分就无法携带了,这就回导致传递过去的对象不闭合,产生报错.解决方法1、如果业务场景是从列表页面原创 2021-09-28 19:31:32 · 6558 阅读 · 0 评论 -
Vue结合element ui 实现图片上传可预览,可删除,以base64字符串上传到服务器
图片实现base64上传实现背景实现方式实现代码实现背景图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;但是最近有一个朋友遇到了一个问题,他们没有做图片管理,所以需要前端将图片转换为base64的形式进行上传. 将图片转化为base64,然后提交这个转换后的字符串.下面是实现方式实现方式通过element-ui 提供的upload方法进行上传,获取上传的file文件,进行转化,提交实现代码html代码 <div class="ma原创 2021-09-24 17:23:42 · 1817 阅读 · 0 评论 -
Uncaught ReferenceError: echarts is not defined
echarts引入失败Uncaught ReferenceError: echarts is not defined最近有个同事问我一个问题,用echarts写demo,发现引入echarts后报错,如图造成原因: 引入js的位置错误,echarts一定要在使用前引入 ,在option前一点导入即可.他在这个demo项目里面的错误,是因为先引入了自己写的js,再引入echarts,导致加载顺序不对,所以出现了echarts is not defined的情况.**解决办法:**只需要按照顺序引原创 2021-04-14 10:50:43 · 17059 阅读 · 3 评论 -
页面开发中css常见问题
1、display:flex;碰上white-space nowrap 影响布局的问题会导致页面宽度超出,造成横向滚动等问题,而且省略号也没有出来原因:设置了white-space:nowrap后,content不能收缩,所以给夫级宽度设置0后就有了固定尺寸,所以就可以收缩了.解决办法: 给其父div设置min-width:0;.parent-style{ min-width: 0;}...原创 2021-04-13 15:39:57 · 148 阅读 · 0 评论 -
微信小程序navigatTo失败 navigateTo:fail can not navigateTo a tabbar page
navigateTo:fail can not navigateTo a tabbar page最近在开发微信小程序,其中页面跳转使用的是wx.navigateTo()这个api但是今天开始时跳转时没有跳转成功 模拟器控制台也没报错后来用真机调试发现了错误navigateTo:fail can not navigateTo a tabbar page这个是因为跳转的页面是底部tabbar里面的页面,所以页面无法跳转解决方法:使用switchTab代替navigateTo 如下wx.swit原创 2021-01-08 17:15:14 · 810 阅读 · 0 评论 -
微信小程序canvas 生成海报的一些坑
微信小程序canvas 生成海报的 一些坑我们公司目前在把支付宝小程序转换成微信小程序,虽然都是小程序,但是开发时还是有很多地方不一样,踩了一些坑.不能设置display:none;canvas生成海报的时候,在支付宝小程序里面,我喜欢把canvas标签隐藏调,这样不占用页面空间.但是在微信里面不能这样设置,不然就会报错,如下图(模拟器不报错,真机调试报错)所以为了隐藏掉canvas标签所占位置,可以通过position定位实现的.canvas { position: absolute;原创 2021-01-05 13:38:23 · 1068 阅读 · 0 评论 -
高德地图前端实现查看某个地点位置
高德地图前端实现查看某个地点位置我这里卸载了一个方法里面,调用该方法就可以实现跳转位置点页面了 toAmapPage() { let key = '此处是你的key' let dest = [120.148833,30.230984] // 这里是位置坐标点 let destName = '雷峰塔' // 这个是位置点的描述 co原创 2020-11-18 16:56:23 · 756 阅读 · 0 评论 -
vue和react 动态渲染div的宽度
react 动态渲染div的宽度react里面使用map遍历,动态渲染 {dataList && dataList.length > 0 && dataList.map((item, index) => { return <div key={index}> <div className="bgcolor" style={{ "width": `${item.length}%` }}>原创 2020-10-21 15:32:29 · 1223 阅读 · 0 评论 -
vue里面的js引入图片,必须用require
vue中js引入图片,须用require引入一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require下面列举例子以供参考<template> <div style="display:flex;"> <div v-for="it原创 2020-09-21 16:33:54 · 4615 阅读 · 0 评论 -
react写h5 使用antd-mobile的Carousel 走马灯控制台报错Unable to preventDefault inside passive event listener due t
最近在用react 写h5移动端,使用的ui库就是antd-mobile,在使用 Carousel的时候 滑动报错了,如下查阅了写文章问题原因由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。 所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive:原创 2020-08-15 17:26:35 · 1782 阅读 · 4 评论 -
css 画一个心
<div class="app"> <div class="heart"></div> </div> .app { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .heart { width: 100px; height: 100px;..原创 2020-08-04 11:07:40 · 156 阅读 · 0 评论 -
js常用方法
字符串去除空格和将const data1 = '2018- 09 - 09' function test(str) { str = str.replace(/-/g, "/");//将'-'换成'/' str = str.replace(/\s/g, "") //去掉字符串内出现的所有空格 return str; } console.log(test(data1)) //结果 2018/09/09...原创 2020-07-28 16:25:48 · 106 阅读 · 0 评论 -
Vue常见面试题
vue的一些常见的面试题1、Vue实现双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。通过 getter 和 setter 劫持了对对象赋值的过程,在这个过程中可以进行更新 dom 操作等等2、bus需要注意什么事件订阅必须在事件广播前注册;取消事件订阅必须跟事件订阅成对出现。数据量比较少时可以使用,业务多或者数据比较复杂建议使用vuex3、原创 2020-07-17 09:12:51 · 241 阅读 · 0 评论 -
判断判断数据基本类型的常用方法
判断判断数据基本类型的常用方法js判断数组的常用方法一、Array.isArray()二、instanceof三、constructor四、.Object.prototype.toSrtring.call([ ])js判断基本类型的常用方法js判断数组的常用方法一、Array.isArray()Array.isArray([1,2,3]);二、instanceofvar arr = [1,2,3];arr instanceof Array三、constructorvar arr = [1原创 2020-06-02 16:35:01 · 708 阅读 · 0 评论 -
git 拉取分支代码/切换远程分支
git 命令行拉取代码分支名称为develop 的分支代码地址为 XXXgit clone -b develop XXX 这样就能拉取到指定分支的代码了原创 2019-11-04 10:34:54 · 2247 阅读 · 0 评论 -
Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错
vue安装node-sass编译报错安装node-scss报错安装node-scss报错在搭建vue脚手架 或者是在vue项目中,想使用sass的功能,npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style...原创 2019-09-03 14:04:08 · 57788 阅读 · 53 评论 -
H5页面不缓存
在这段时间的开发遇到了一个需求,每次打开应用,会缓存以前的一些内容,影响使用体验。解决方式,在html页面上添加三行代码就能搞定代码如下<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equi...原创 2019-07-18 17:07:48 · 2525 阅读 · 0 评论 -
fullpage.js开发报错
**当引入fullpage进行开发时,控制台会报错 ,但是功能没有影响**fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here:想要解决这个问题很简单,如下在fullpage.js文件中查找lic...原创 2019-07-18 16:59:23 · 702 阅读 · 0 评论