- 博客(25)
- 收藏
- 关注
RSS订阅原创 js懒加载
懒加载的目的就是为了提高用户体验 降低服务器压力 有时候我们的内容很长很多 但是屏幕只有那么大一点 一次加载出来全部显然是不合适的 懒加载就是为了让页面显示在屏幕可视区域内再加载当前的数据 像大型购物网站都有这个操作。或者可以这么写 用loading占位加载 data-original是真实要加载的图片 判断图片到屏幕可视区域内 用data-original的值替换src 道理是一样的。先用_src占个位置 到加载的时候再把_src的值赋值给src。下面以图片懒加载举例说明懒加载的过程。
2023-06-26 18:36:44
193
原创 原生js分页
项目中要对数据进行分页处理 一般分页我们都用插件 比如elementui bootstrap之类的 但其实原生的我们也应该理解思路 理解思路有点代码功底自己也能调试出来。我们首先需要知道一共有多少条数据（分多少页，接口请求来的总数据条数。可以先请求一次接口，拿到总条数） 一页多少条数据 （后端给的参数）最近工作好忙 工作中也遇到了很多问题 也很久没有更新博客了 闲下来继续更新吧 大家一块学习。
2023-06-26 15:39:28
596
原创 如何增强前端代码的健壮性
所谓前端的代码健壮性 是指我们的代码在正确和规范的环境中运行时 保证其正确 快速 高效 但是还有一些特殊的环境 比方说后端返回值出现问题 用户操作出现问题 没有网络 页面某些部分没有请求出数据 仍然要保证我们的代码能够正确的运行 给用户一些提示和反馈 不至于大面积的崩溃 出现一些让人意想不到的结果。计算机内的浮点数计算和我们数学上理解的浮点数运算不是一回事 比如计算机中 0.1+0.2!通过以上代码端的控制 最大程度上保证我们的程序在应对一些怪异的用户行为时 仍然是可用的。3 能应对用户一些怪异的行为。
2023-03-23 18:29:04
260
原创 el-checkbox-group多选和选择全部问题
项目中有个需求 搜索学校的时候有选择全部和多选省份的功能 使用用element ui的多选功能 做些修改和封装。至于element的前面复选框的问题 样式里把复选框dispaly:none就可以了。
2023-03-01 17:15:12
1493
原创 for循环中止循环和forEach中止循环
在很多场景中 我们需要判断是否满足条件 满足条件拿到数据或者提示信息中止循环 且中止下面代码的继续执行 多用在登录判断 用户信息填写 绑定手机号密码等的判空和正则判断。return false/return只会中止本次循环而不会让全部的循环不再执行。首先 forEach是没有 break和continue的 写了会报错。forEach可以通过抛出异常的方式强行中止循环。判断符合条件 中止循环并中止程序。判断符合条件 中止代码执行。抛出异常强行中止循环。
2023-02-23 16:23:34
573
原创 element自定义主题色
选择好自定义的主题色 右上角下载下来 放到自己的项目文件夹里。仅替换主题色 官网给出的在线主题生成链接。修改main.js的引入。
2023-01-04 18:37:13
201
原创 解决echarts图例去圆点 堆叠折线图小数数据出问题以及设置Y轴刻度
线图所显示的默认图例是带有原点的，只需要在对应的线图上添加属性即可：itemStyle:{ opacity:0 } 设置Y轴刻度折线图有多条时 数据带小数 单条折线数据正常 多条数据显示不准确去掉每个series的stack属性
2022-12-05 00:09:33
1771
原创 解决npm 下载工具包太慢的问题
npm对应的地址是国外的 需要海底电缆传输 受各种因素影响 传输到国内的速度确实受到影响 我们可以把下载源换成国内的淘宝镜像 这样速度会快很多。1 用npm下载cnpm 把地址换成淘宝镜像。2 设置改变默认下载地址 还是用npm下载。3 自己按需求切换下载地址。以下有三种方法可以参考。
2022-11-16 11:54:33
994
原创 css多行文本溢出显示省略号 兼容ie
兼容ie的写法 目前没有特别好的纯样式可以兼容ie 我们就要考虑用js来处理。先来说一般写法 兼容谷歌火狐 不兼容ie。
2022-11-14 16:41:47
1080
原创 cnpm报错解决
报错：Error：Cannot find module 'fs/promises。升级到最新的版本：n latest（最新版本）n stable（最新稳定版本）清理npm缓存：npm cache clean -f。安装版本管理工具：npm install -g n。解决办法 降低cnpm版本 或者升级node版本。原因：node版本太低或者cnpm版本太高。cnpm -v查看版本。再安装低版本的cnpm。1 降低cnpm版本。2 升级node版本。
2022-11-11 15:50:19
2277
原创 html表格td溢出显示省略号
给td中的文字套了一个p标签，给p标签设置overflow:hidden;并且给p设置宽度 就可以解决以上问题。/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。设置此属性之后td以50%和50%显示 */text-overflow:ellipsis;
2022-11-07 22:24:24
908
原创 promise()的理解和使用
promise用来处理异步代码 Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。promise.all()是将所有的参数接口都调用 返回出结果后再返回 并且按照参数顺序返回结果数组。promise.race()是异步调用 哪个接口返回值快 就返回哪个接口的数据。
2022-09-27 18:53:18
1127
原创 js百度地图获取当前定位经纬度及省市区
注意new BMap()是2.0版本的 new BMapGL()是1.0版本的 如果用new BMapGL()会报错 BMapGL is not defined。因为一开始就写错了 这个问题困扰了好久。首先需要引入百度地图api 和jq。
2022-09-27 17:21:29
6843
1
原创 js动态渲染html 给html绑定点击事件
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
2022-08-24 17:06:02
2327
1
原创 程序员平时如何学习提高技术
很多时候，我们因为工作原因需要快速学习某项技术，进而在项目中应用。有时工作闲暇之余，想进阶自己的技术。或者说，我们想要去面试的公司要求的某项技术我们之前没有接触过，为了应对面试需要，我们需要快速掌握这项技术。...
2022-06-08 18:03:47
2347
原创 js 实现表格合并单元格
需求 实现下面的表格效果代码：//利用去重原理 function table(dom) { var arr = []; var f= document.getElementsByClassName(dom); for (let i = 0; i < f.length; i++) { if (arr.indexOf(f[i].innerHTML) == -1) { arr.push(f[i].innerHTML); var.
2022-04-15 16:21:35
2873
原创 H5引入vant异步加载省市区三级联动
html <van-field v-model="placeCityValue" is-link readonly required input-align="right" label="籍贯所在市" placeholder="请选择籍贯所在市" @click="placeCityshow = true" class="jiguan"></van-field> <van-popup v-model="pla...
2022-03-17 16:38:05
2168
1
原创 html通过cdn引入element字体图标无法显示的解决办法
问题：element通过cdn引入时，按官网引入线上css样式图标样式正常显示没问题，如果引入本地css则字体图标不显示 <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><!--线上css地址--> <!-- import Vue before Element --><script src="../j
2022-03-17 15:32:57
2997
2
原创 html引入vue请求数据
vue不支持直接发送AJAX请求，需要使用vue-resource、axios等插件实现。首先需要引入 vue.js,vue-resource.js<script src="../js/vue.js"></script><script src="../js/vue-resource.min.js"></script>下面是链接https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.
2022-03-03 12:06:33
1814
原创 点击列表限制选择个数并且给选中的项目按点击顺序标识排序
需求1：考生点击科目 限制所选科目的个数分析：循环渲染列表，用一个空数组接收选中的项，取消一个在这个数组里删除掉对应的项，判断数组长度如果大于3，return结束程序代码：template <div class="chosesub">选择选科 <span>需选择三门学科</span></div> <ul class="content"> <li v-for="(item, index) in touristL
2022-03-02 18:35:34
1577
原创 vue点击按钮保存图片至本地
需求：项目中需要获取二维码展示出来并且能够保存到本地扫描 类似下面这种分析：主要是用了a标签的下载功能 ，a中 标签href实现点击下载目标链接功能，只需要在a标签里面加上download属性就可以实现下载目标链接的效果例如：<a href="../../../static/images/Promise.png" download="Promise.png">点击下载</a>download是文件名，也可以不写文件名，这样下载下来就是默认文件名。下面看代.
2022-03-01 19:05:40
4824
1
原创 Promise.all的执行顺序和返回顺序
Promise.all()用法：多个接口全部返回值后再进行下一步操作Promise.all([a(),b()]).then(res=>{console.log(res)})最近项目中有个问题 需要同时返回a和b接口的返回值再做下一步 并且要对不同的返回值做不同的处理 这就需要区分res的返回值中究竟是否有返回顺序zsgroupMemberApply(qs.stringify({ checkResult: 0 }) ).then(res=>{ console.log('A
2022-02-25 12:22:14
8702
原创 vant 通过组件调用 Dialog 时 show-confirm-button使用及展示多个按钮
最近开发复盘项目时遇到这么一个问题 原先dialog自带的取消和确定按钮要隐藏掉 写自定义按钮并且要求有三个按钮 查vant官网只有俩按钮的 找了一些资料实现了隐藏原先按钮并多个自定义按钮首先来看普通的dialog的使用 官网Vant - Mobile UI Components built on Vue这样的写法是只有取消和确认两个按钮的 接下来看多个的实现过程1 首先要隐藏掉默认的取消和确定按钮看官网文档给show-confirm-button和show-cancel-b..
2021-11-02 18:53:02
6798
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人