- 博客(30)
- 收藏
- 关注
RSS订阅原创 虚拟列表优化性能的简单Demo
angular写法： <!-- 虚拟列表滚动 --> <div class="list-view" #visibleList (scroll)="handleScroll()"> <!-- 使用一个不可见元素（.list-view-phantom）撑起这个列表，让列表的滚动条出现 --> <div class="list-view-phantom" [ngStyle]="{'height': contentHeight}"></d
2021-10-19 16:38:10
354
原创 用防抖，节流来优化性能
看文章时了解了防抖，节流两个概念，觉得可以优化项目中输入框输入内容时多次调用接口的问题。**防抖：**开始输入内容时设定一个计时器，如果在计时器之内又有内容则不调用接口，重新开始计时<input type="text" class="form-control" [(ngModel)]="seoCon" (keyup)="onBounce()" placeholder="Search for..."> // 输入事件 onBounce() { let debounceAjax
2021-09-15 16:50:26
117
原创 引用hammer左右滑动后上下滚动失效
需求加了一个左右滑动的功能，但在加完之后发现页面不能上下滚动了。>头秃<查资料发现，有个属性可以轻松解决此问题：在需要操作的区域加上 touch-action：'pan-y'touch-action 属性：指定某个给定的区域是否允许用户操作，以及如何响应用户操作 （比如浏览器自带的划动、缩放等）。1、auto当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。2、none当触控事件发生在元素上时，不进行任何操作。3、p
2021-02-02 11:44:52
1053
原创 移动端蚂蚁组件（antd-mobile）- 解决日期组件中的语系问题
目标：期望：我们项目需要有繁简体两种语系，对于一般的选择器是有可配置文案的属性的，但是日期选择器却没有。通过研究还是发现了这个属性是可以配置语系问题的。试过之后发现竟然就是没有我需要的繁体（zh_TW）。无奈之下，只能研究看这些语系是怎么写的，我仿照写个繁体的语系文件放到包里，但很快这个想法被我pass了，一个是因为语系并不是直接写在这些文件里的，另一个因为我们项目较多，人员也多，万一下次不是我改，别人可能就不知道到底怎样修改。于是又产生了另一个想法，包不能改，那我就在文
2020-08-24 10:24:45
1228
原创 浅拷贝和深拷贝
现象：数组通过=赋值后，修改新数组会改变原数组。解决方案：1、用es6的扩展方法【...】2、slice， concat原理：1、js中存储对象时的存储方式是用指针指向内存地址，用=赋值只是将指针赋给了新数据，实际指向的内存地址并没有变化。浅拷贝只是拷贝指针，深拷贝才是将指针连同内存一起拷贝。2、（...)取出所有可遍历属性，拷贝到当前数组或对象中。let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1,...
2020-07-10 14:51:44
91
原创 nz-range-picker 默认展示当前月和上个月
现有需求要求今日及以后日期禁用，所以打开控件时还显示下个月就不符合实际需要。现状：目标：解决思路：看过文档之后，排除了采用官方提供的属性，方法；发现控件有上个月 (翻页上键)的方法，所以就想我可不可在打开日期面板时就触发翻上个月的方法呢。解决方法：<dw-range-picker class="range-picker" style="width: 90%;" dwFormat="yyyy-MM-dd" [dwAllowC..
2020-07-10 13:54:16
2292
原创 在一个数组中过滤掉另一个数组的中的数据
arrA：[ {'user_id': 11, 'user_name': '张三', isObject: false, ...}, {'user_id': 55, 'user_name': '李四', isObject: false, ...}, {'user_id': 77, 'user_name': '陈一', isObject: false, ...}]...
2020-04-12 17:42:46
2480
原创 前端如何在angular和vue项目中进行实时数据过滤
//假设后端通过接口给我们的数据如下：let data = [ { name: 'Andy', age: 13 }, { name: 'Jack', age: 14 }, { name: 'Lucy', age: 12 } ]//在实际项目中，我们需要根据筛选框中的条件来实现...
2020-03-10 13:59:14
297
原创 angular和vue的动态组件详解
现在敲动态，按需加载，可复用的代码成为我们的目标，所以就我在angular和vue框架中使用动态加载组件的一些心得做个分享。废话不说，直接上代码：Angular<ng-template dynamicComponent></ng-template>// 首先为我们的组件找个容器ng-template, 并且创建指令dynamicComponent首先写个...
2020-03-10 10:03:38
641
原创 for，forEach，for...in，for...of，map比较
1、首先for（let i = 0 ;i < arr.length ; i++）{...}写法复杂，但是内部可扩展性强，可跳出循环。2、forEach致命缺点不能用return，break跳出循环。3、for...in es5特性，遍历时返回健名，所以适合遍历对象。4、for...of es6新特性，遍历时返回健值，可以搭配entries()，keys()，values()使用let arr = ['a', 'b', 'c'];for (let item of arr.e...
2020-03-07 20:17:58
756
原创 ios的微信公众号界面中打字键盘收起后原本页面中的点击事件失效
首先交代一下，我是用angular写的公众号项目，在点击按钮出现的弹框中打字，调起了ios的虚拟键盘，当键盘收起时，发现弹框中的点击事件失效了。其实我做过实验，就是打字完成后不点击键盘中的“完成”按钮，直接点击弹框中的按钮就是可以的，但我不可能控制用户的操作，所以只能重新找方法。既然找到原因，那就去查资料，果然早在2018年底，就有人提出这个问题，因为ios12.x系统升级，所以部分iphon...
2020-03-07 19:56:30
383
原创 angular引用管道pipe时踩的坑（Type UmberUnitPipe is part of the declarations of 2 modules:）
我的管道pipe都是统一引入到模块pipeModule中，再在app.module.ts中import这个模块的umberUnit.pipe.tsimport { Pipe, PipeTransform } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser'@Pipe({ n...
2020-01-14 10:20:04
1234
2
原创 用抽象组件写瀑布流页面
1、先写组件masonrymasonry.json{ "component": true, "componentGenerics": { "masonry-item": true }}masonry.wxml<view class="masonry-list"> <view class="masonry-list-left" sty...
2019-12-18 16:01:18
209
原创 微信小程序中组件的知识点汇总（lifetimes，externalClasses，observers，selectComponent，componentGenerics。。。）
1、组件也有它的生命周期（lifetimes）自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高） lifetimes: { created: function () { // 组件实例化，但节点树还未导入，因此这时不能用setData }, attached: function () { ...
2019-12-18 14:22:39
4998
原创 去掉和已有数据重复的数据And去掉自己本身重复数据
原本有数据，后添加的数据不能与原来数据有重复值。 const data: [] = result.data.content;// 从后端获取到的数据 if( _this.notices.length > 0) { // 如果notices本来就有数据，则后面...
2019-04-12 10:15:41
281
原创 关于Iterator（遍历器）的干货
提到遍历，就一定要知道symbol.Iterator,任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。for是JavaScript中为我们提供的一个最原始的方法/** 这种写法用起来没问题，就是不简洁。 **/for (var index = 0; index < Array.length; index++) { console.log(Array[ind...
2019-04-11 15:26:58
365
原创 在vue+ts中自定义过滤器（毫秒转换成标准格式）
如果在许多地方都需要对数据格式进行转换，那么滤器绝对是一劳永逸的好方法。1.就以时间为例，后台返回的多是毫秒数，所以就需要在前台将毫秒数转换成标准时间格式第一步，建立一个timeUtil.ts文件，方便复用/** 以毫秒1554780164000 转换成 2019-04-09 11:22:44为例 */// fmt: 'yyyy-MM-dd hh:mm:ss' time: ...
2019-04-10 15:20:05
6707
原创 vue3.x+typeScript在编译时如何支持js格式的插件
项目用的是vue3.X.0 + TypeScript，但由于也引用了不少js插件（vue-cloud、vue-simple-uploader），所以在编译时会出问题。为了解决这一问题，这里有一个特别简单便利的方法。新建项目时会自带这样一个文件： 进去加这样一行代码就可以随意引用了。 ...
2019-02-20 15:18:01
785
原创 Vue报错：‘Unexpected console statement (no-console)’
写项目过程中用ESLint遵守代码规范很有必要，但是对于一些规范也很是无语，比如：‘Unexpected console statement (no-console)’，连console都不能用，这就很抓狂了。于是查资料发现，写一个tslint.json文件，在其中进行一些配置，就又可以愉快的敲代码了。{ "defaultSeverity": "warning", "extends":...
2019-02-18 11:38:43
11472
1
原创 获取电脑屏幕宽高
width : screen.getPrimaryDisplay().bounds.width,height : screen.getPrimaryDisplay().bounds.height,
2019-01-17 15:45:37
898
1
原创 $attrs、$listeners和inheritAttrs详解
在写项目过程中发现很多组件之间需要通信，父子组件之间还好，但有时就需要跨多级传值，传很多值就很繁琐，代码也很冗余。在vue文档中我发现这样一个属性，可以将要传递的值放到$attrs中，这样只需要在孙辈组件中取就ok，中间过程中就可以减少很多重复代码。而子辈或者孙辈中emit的事件可以在中间组件中通过$listeners属性避免多于代码。parents.vue<templat...
2019-01-08 14:25:26
1281
1
原创 vuex在vue2.x+typeSript中的使用
本文就以vuex在用户登录、退出时的使用为例。一、在 main.ts引用二、store文件目录三、Security.ts里面的具体内容/** 用于保存当前用户登录状态 */import {Commit,ActionContext} from 'vuex';import {AuthorizedUser} from '@/domain/security';/** 此文...
2018-12-20 16:10:51
630
原创 仿微信通讯录--按姓氏进行分类
话不多说，先上效果图，看看是不是你们需要实现的效果如果是要这样效果的话，下面上代码（主要分为三个部分）：1、html部分<div class="contentData"> <div v-for="(item, index) in letterData" :key="index"> /** 这是首字母 */ <div cl...
2018-12-06 17:39:16
1312
原创 好用的前端插件一：（clipboard）--复制功能
现在很多地方在输入框后面都会带一个直接复制框内内容的功能，省去了选中内容进而ctrl+c的步骤。这个功能看起来好厉害，其实clipboard插件可以很轻易的实现。下面介绍如何在项目中使用该插件：1、无论什么插件第一步都是先引入yarn add clipboardyarn add @types/clipboard 2、在你需要用到的文件中引用import Clipboar...
2018-11-22 16:57:32
3345
1
原创 前端通过RegExp（正则表达式）实现实时搜索功能
表格内容要求随着顶部查询条件的变化而变化，虽然每次可以通过发送请求由后台来进行筛选，但是简单的一些操作前端可以完成尽量由前端完成。vue项目中可以利用计算属性get来实现。 get showFriends() { const searchRegex = new RegExp('筛选关键词', 'g'); if (this.friends) { return ...
2018-11-22 16:36:02
1554
3
转载 优化if-else代码
//例子 var mMap = new Map([ [162,function(h,a){console.log("he height is" + h + " ,he age is" + a)}], [174,function(h,a){console.log("he height is" + h + " ,he age is" + a)}], ...
2018-11-08 14:41:19
650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人