- 博客(12)
- 收藏
- 关注
RSS订阅原创 图片懒加载的vue指令实现方式
图片懒加载在日常开发过程中经常会使用到，一般情况下的实现思路是先判断图片是否出现在页面内，然后替换图片的src属性从而控制图片的加载。这一思路比较简单，但是每次使用时都需要重复计算图片的距离页面高度，比较繁杂，这一次通过Vue的自定义指令实现图片懒加载，只需要在需要图片需要懒加载时将src改为对应的指令即可，使用非常方便。具体使用方式：<img class="img" v-lazyload="imgSrc" alt="">此处主要应用的Vue的Vue.directive功能，实现了一个l
2021-06-28 18:44:57
272
原创 Vue实现一个简单的瀑布流组件（包含图片懒加载功能）
日常业务需求中经常会使用到瀑布流布局，在实现瀑布流布局时，总体上的思路是：将页面等分为一定的列数，计算出最短的一列，然后将需要放入的元素放入最短的一列中，重复以上步骤，直到最后将所有元素放入列中。总体来数，瀑布流布局的计算步骤比较复杂，同时还需要考虑上拉刷新等情况，为了减少重复的工作量，可以创建一个瀑布流的组件，后续在开发时只需要关注每一个元素的布局，而无需考虑瀑布流的实现，从而大大的减少工作量。实现效果：组件使用示例// 引入组件import waterfall from '@com/wate
2021-06-25 17:33:57
2606
原创 Vue.extend实现一个提示toast插件
日常开发中经常会使用到提示信息框，例如：接口调用失败需告知失败信息，用户点击加入购物车需告知用户加入成功等。若每次单独写，则非常繁琐，且没必要。因为此功能和页面整体的耦合性不强，因此可以单独拿出来做一个插件。因为此插件可以挂载到Vue的原型上，可以十分方便的使用：// 使用示例this.$toast.info('this is a message', 3000)使用效果：由于这个提示框和页面并不耦合，因此可以将其提取出来，新建一个.vue文件，主要用于创建一个组件，确定布局，样式等。toast
2021-01-13 18:15:24
432
原创 VUE实现锚点组件
通过Vue实现一个组件，此组件的实现效果如下。此组件分为横向和纵向两个部分，横向和纵向都由数量相同的item组成。点击横向部分的item，横向部分吸顶，此item被选中，移动到中间，同时纵向部分对应的item滚动到视野中的最高点。同时页面滚动时，纵向部分滚动到哪一个item，横向部分对应的item被选中，且位于居中位置。组件位置：https://github.com/377-dsq/ddcom/blob/master/src/components/scrollTab.vue实例页面：https://
2021-01-12 16:03:34
1156
原创 Vue实现swiper轮播组件
目前市面上有很多轮播组件，但是有的不满足业务需求，因此也需要自己首先轮播组件。以下是一个用vue实现的轮播组件，带动画效果，可以自行设置轮播速度，选择是否需要分页器等。效果如下：思路：结构：一个轮播组件应该由三部分组成，一是轮播的元素，如图片等；二是底部的分页器；三是前一张，后一张的按钮；轮播实现：外层元素有固定的宽度，形成一个展示窗口，内层的轮播元素排列在窗口后面，定时移动内层元素，从而实现轮播。注意点：当内层元素不断向左移动到达最后一个元素后，下一次移动需要将最后一个元素移动到第一个元素，
2020-10-18 12:00:36
4359
1
原创 小写金额转为中文大写
目标将小写的金额转化为中文大写，如99.99转为“玖拾玖圆玖角玖分”思路阿拉伯数字有对应的中文大写，需要将其转为中文大写。金额分为小数部分和整数部分分别处理，整数部分和小数部分转换完成后拼接在一起即完成转换小数部分比较简单，将阿拉伯数字转为中文大写后加上对应的单位即可，如0.22，2转为贰，加上单位角，然后递归处理。整数部分小于4位时，单位为‘仟’，‘佰’，‘拾’，但是当位数大于四位时，在原有‘仟’，‘佰’，‘拾’的基础上需要加上单位‘万’，‘亿’，‘兆’等，因此需要将整数部分按照4个数字分为
2020-09-27 11:34:46
1815
1
原创 Error: Can‘t find Python executable “python“, you can set the PYTHON env variable解决记录
问题：Error: Can’t find Python executable “python”, you can set the PYTHON env variablenpm ERR! node-sass@4.13.1 postinstall: node scripts/build.js解决以管理员模式运行powershellwindows模式下安装windows-build-toolsnpm install --global --production windows-build-tools
2020-09-07 14:46:43
216
原创 算法题 —— 求和为s的连续整数序列 —— js实现
题目：输出所有和为s的连续整数序列，要求序列内从小到大排列，序列按照值最小的数从小到大排列例如：和为15的正整数序列：[1, 2, 3, 4, 5], [4, 5,6], [7,8]分析：连续整数相加的和等于中间值mid × 整数个数 n 若个数为奇数，则中间值 mid 为整数。（如上例中 1+2+3+4+5 = 3 × 5） 或个数为偶数，则中间值mid 为 整数 + 0.5 （如上例中 7+8 = 7.5 × 2） 因此，已知和为s，若除以奇数个数n，能整除，则可以转为n个连续数相加；
2020-08-02 12:35:33
448
原创 算法题—查找—求1~n之间数字1出现的次数—javascript实现
方法1：思路：从1遍历到n，将数字转化为字符串，并通过字符串的split方法将其各个数位上的数拆分出来，形成数组，如123变为[1,2,3]，通过forEach方法遍历数组，如果item为1，则次数加1；代码：function NumberOf1Between1AndN_Solution(n){ let res = 0; for (let i = 0; i <= n; i++) { i.toString().split('').forEach((item)=>{ if (it
2020-07-18 22:11:21
625
原创 前端笔试题——数组去重的几种实现方法
1. ES6中的new Set()方法function dRemoval(arr){ return Array.from(new Set(arr));}Set是ES6中一种新的数据类型，类似于数组，但是其成员都是唯一的，没有重复值。通过new Set()将数组转化为没有重复值的Set类型；然后通过Array.from将Set类型转回数组类型。2. indexOf()方法function dRemoval(arr){ let newArr = []; for (let i in arr){
2020-06-22 00:42:08
405
原创 前端笔试题——实现对象深拷贝的几种方法
浅拷贝：实际上复制的是对象的引用，相当于复制了对象的内存地址。复制后，系统中存在一个对象，但是有两个指向该对象的地址。当原对象A的属性或方法发生变化时，复制后的对象B也相应改变。深拷贝：复制对象，并创建一个指向这个新对象的指针。新开辟一个内存，用于存放一个新的，和原对象A一样的对象，并创建一个指针指向该对象。原对象A的属性或方法发生变化对复制后的对象B没有影响。深拷贝的方法：1. JSON.parse(JSON.stringifiy())方法function deepCopy(obj){
2020-06-21 21:42:09
1026
1
原创 纯JS实现懒加载+瀑布流布局
纯JS实现懒加载+瀑布流布局瀑布流布局一般用于图片布局，其视觉表现为参差不齐的多栏布局，随着页面的滑动，会不断加载新的图片。懒加载主要用于实现提高系统的响应速度。对于图片比较多的网页，如果一次性加载出所有的图片，会导致系统的加载时间较长，用户等待时间也很长。而懒加载则在用户需要查看图片的时候才加载他，从而使系统可以更快的加载图片。懒加载主要的实现方式是：先设置所有的图片的src都为同一个背...
2019-10-27 19:36:17
1080
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人