- 博客(34)
- 收藏
- 关注
RSS订阅原创 用react搞定一个大模型对话效果
最近AI盛行，关注几个大模型网站都能发现，跟AI对话的时候，返回的文本是逐字展示的，就给人一种AI边解析边返回的感觉（不知道是为了装X还是真的需要这样）。第一个：用个定时器，把时差设置为变量delay，每次都随机生成delay，固定展示三个字符，直到展示完全。简单来讲就是，速度不固定，每次展示长度固定。由于我这边后端返回是一次性返回所有回复，而天煞的产品经理要求做出逐字展示效果，于是我只能纯前端控制展示。整体实现并不难，但要做好每个细节还是需要一点思考的，ok，，我要拿去装逼了，拜拜！
2024-01-25 17:08:00
551
原创 封装一个丝滑的聊天框组件
这里没有写滚动条的处理逻辑，手写一下： 用ref绑定滚动条，发送消息or拉取历史记录，需要计算滚动条滚动的高度并作出对应处理。应公司业务要求，需要做个聊天机器人，要适应不同的业务场景，大概就跟淘宝客服类似，发送消息，机器人自动回复。
2022-12-13 17:21:31
21361
14
原创 在antd tree组件基础上封装一个文件目录树
背景最近公司所做的项目中有个文档管理的需求，需要有个目录来展示不同的文档。可以对文档目录进行添加、重命名、删除、切换等操作。但是antd的tree组件不能完全满足需要，于是就进行了二次封装。先看看效果图：难点主要的难点是这个hover按钮，之前没什么思路。后来想一想，可以放在数据中的title里面，antd中的数据都可以将一段jsx放进去。如下：const TreeTitle = (props) => { const { title, id } = props;
2021-11-23 17:31:30
2767
4
原创 记录一个react+antd中使用数组循环出checkboxgroup的过程
记录一个react+antd中使用数组循环出checkboxgroup的过程前段时间项目中遇到一个需求，效果如下图：这个红框里面的是通过一个数组渲染出来的，后端给过来的数据格式是一个一维数组：[{ title: '意图', label: '搭讪'， value: '1'}, { title: '方向', label: '出'， value: '3’}, { title: '意图', label: '搭讪'， value: '1'}]前端需要将数组通过title来升级为二维
2021-07-14 15:35:34
2881
1
原创 记录一个eslint配置问题
前端时间在项目中加上eslint，遇到了一个问题。如下：问题的原因这篇文章解释的很详细：https://segmentfault.com/a/1190000021803437这里我发现文章中第三个文案是没有效果的。我在自己的项目中.eslintrc.js文件中加上如下配置就可以解决这个问题：endOfLine: 'auto',位置如下图：加上之后，项目中碍眼的波浪线全都消失，非常简单就解决这个问题，希望对你有帮助！...
2021-05-31 15:35:29
1424
1
原创 nlp标注系统前端功能实现
nlp标注系统前端功能实现简介由于目前是在AI部门任职前端，需要给部门的标注人员做一个标注系统。做之前感觉挺简单，真正编码的时候发现有些细节的地方还挺复杂的。简单做一下需求分析，列举一下主要功能点：导入原始数据（json），例如： [ { "text": "【最终指导】20首开PPN001，目前边际3.99, 3.9以内已有超一半的量，预期3.8，请大家于17点前反馈我最终标位。", "labels": [] }, {
2021-04-14 17:01:18
1531
9
原创 奔跑吧骚年，记住你来时的样子！
时间飞逝，如你惊鸿一瞥，如白驹过隙。 突然想写下来此时的心情，却不知道如何下笔。 这周终于鼓起勇气，在HR-X上提了离职。这一周觉得很难受，很讨厌这种感觉，这种离别让人深刻，就像高考时，就像大学毕业时，面对当下美好的时光面对身旁很好的人，却不得不因为某些原因要离开。总归让人不舍。 两年前的面试还历历在目，记得当时做了笔
2021-03-05 10:18:31
295
2
原创 apply,call,bind详解
apply，call，bind详解三者区别apply，call，bind都能改变函数内部this指向apply，call会运行函数且返回函数结果，区别只是参数传递方式不一样bind不会运行函数，只绑定this且传参，依然返回一个函数一、apply源码实现实现之前，先写一下我们的测试案例 var obj = { a: 1, b: 2 } function add(c, d){ return this.a + this.b + c + d; } console.log(ad
2021-01-07 15:35:12
226
原创 webpack探寻之路
webpack探寻之路准备工作： 全局安装webpack-cli 和webpack1、核心概念 entry，output，loader，plugin，modeconst { resolve} = require('path');module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: resolve(__dirname, 'buil
2020-10-28 14:30:21
147
原创 前端面试之vue篇
1、简述vue2.0+的基本原理延伸：vue2vue3definePropertyproxy需要做递归去添加对象每个属性的setter和getter可以直接监听对象的变化需要对数组操作做单独适配兼容性不好2、vue的生命周期3、vuex的原理...
2020-08-31 16:42:23
260
原创 webview踩坑之数据无法更新
这两天项目中遇到了一个问题，觉得挺有意思，记录一下。背景： 项目是混合应用，原生开发嵌入H5webview。H5是用的vue多页应用结构。问题描述： 需求中有一个页面有个入口，需要跳转到项目另一个url。是调用原生的方法跳转到之前开发的页面。原生的逻辑是新开一个webview去跳转。这里我们称原webview为w1, 新开的为w2。 在W2中，我们有一些操作会导致数据有变动，这时我们需要返回到W1中，返回的操作也是调取原生方法去关闭W2，对W1没有任何操作。导致W1的数据不会重新请求刷新，展示的
2020-07-11 16:11:08
1822
原创 贴一个刚做的新手引导页
前阵子有个新手引导的需求，本来同事说用UI框架的modal框做，想了想感觉下一步的动作太生硬了，干脆就自己动手写了写，效果还不错。主要用css animation做跳转动画，用绝对定位定位引导框效果如下：vue文件<!-- 新手引导 --><template> <div> <div class="model"> &...
2019-04-01 17:41:18
2605
3
原创 如何快速的用html和css写静态页面
这两个星期，又写了一些静态页面，感觉比之前要快多了，下面来总结总结写静态页面的时候要注意的一些问题，以及如何更高效的搞定需求。 在团队作战中，规范尤其重要，一个项目需求出来之后，经历需求分析，产品出原型，UI出图，前端写页面，后台处理接口数据库等等。每一个环节都至关重要，缺一不可。这里我们讨论的是将UI图转换为页面的过程。 在出图之前，我们应该跟UI有个沟通，沟通的细节有： 1、...
2019-03-22 17:24:59
7876
1
原创 tradingview使用心得
因为公司目前是在做一个交易所的项目，页面中需要用到k线图，之前用了echart的k线，太过简陋了，参考了另外几个同级网站，决定用tradingview这个专业的股票交易所类的图表库。从上周开始就研究tradingview，一直到昨天才算是勉强能够在本地运行，真的是不容易。下面来说说使用过程中遇到的一些坑。1、tradingview虽然是开源免费，可也是仅限于一些基本的图表服务，但这也基本上够用...
2018-10-25 11:26:34
24641
60
原创 冒泡排序与快速排序
昨天，闲下来看了下冒泡排序与快速排序的区别。 两者区别还是挺大，思路完全不一样。 我们先看冒泡排序，冒泡是通过比较相邻两个元素的大小来调换顺序，循环下去。代码如下// 冒泡排序 function bubble(arr) { let n = 0 for (var i = arr.length - 1; i >= 0; i--) { ...
2018-08-15 11:10:19
2620
原创 使用gulp来对app进行打包构建
最近APP项目出了一个切换产品的需求，就是要通过构建来切换App的皮肤、logo、文字、图片等，出了逻辑代码和页面结构，基本上其他的都要可切换。一番考虑过后，果断使用了gulp来实现。思路是这样： 在App项目文件夹下新建一个目录，里面放上四个目录，分别是img,scss,i18n，config。在gulpfile.js中，有如下代码：//切换产品gulp.task('...
2018-03-12 11:27:30
977
原创 使用canvas做一个抽奖转盘
最近，公司在每周五下午会有一次个人分享沙龙。上周我自愿参加了，因为每周都是由当前主讲人来决定下次的主讲人，于是就有做一个抽奖页面的想法，话不多说，先看效果。点击抽奖之后，转盘的速度会由慢到快，然后由快到慢再停止，整个过程持续时间是3s,下面是代码html lang="en">head> meta charset="UTF-8"> title>抽奖title>
2018-01-16 14:31:38
3933
转载 移动端适配方案
https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651553246&idx=3&sn=698b920aaaf394c27a3475a0b6411ceb&chksm=8025aa1fb7522309ae2df525aa496e9207f62ac657e66654ff627d03da652ce29d7fd39da5ce&scene=0&key
2017-12-11 15:10:47
337
原创 ionic国际化 - translte
最近在整理项目中的国际化json文件，觉得这个需要总结一下。目前我们是用ionic做的项目，之前在网上找的方案，是直接用angular的translate服务，配了两个json文件，一个中文包，一个英文包，结果在ionic serve 的时候没问题，但是打包在手机上运行的时候却行不通，页面显示全是一堆国际化的key，简直是醉了。百度什么的查了一下，发现这个问题是存在的，目测是ionic的bug。于是
2017-12-11 10:49:18
900
原创 使用ionic自带的push notification
两天时间，终于将ionic push试验成功，由于公司业务需要，不能使用极光这类国内推送服务，所以研究一下ionic官方集成的push插件，用的是google的服务。下面介绍一下步骤：1、在firebase（https://console.firebase.google.com）网站上注册你的账户，然后新建一个project，进入工程下，可以看到这样的界面!点击Overview旁边的设置图标后点击
2017-09-08 15:48:36
6305
4
原创 ionic css过渡配合ng-class做表单的label点击上移
1、需求描述： 在表单中，点击input，input中的placeholder上移成为label标签 2、代码： css ://表单中的label随着获取焦点上移.label-slide-up{ font-size: 0.32rem; color:#97a6ac; transition: all linear 0.5s; position: abso
2017-05-17 16:02:25
684
原创 ionic splash在iphone6plus和7plus上的显示问题
问题描述： 使用ionic resources 命令，然后打包成apk或者ipa，装到手机上，只有iphone6plus和iPhone7plus有问题，显示的是系统默认的splash页面，而不是我设置的关于产品logo的图片。解决方案： 在config.xml文件中，在中加一行：<splash src="resources/ios/splash/Default-667h@3x~i
2017-04-14 11:20:59
601
原创 ionic大小写敏感问题
昨天遇到一个问题，公司的老司机帮我一起找了两三个小时，终于找到什么原因。**问题描述：** 项目中使用的是ui-router，在跳转中使用$state.go()，在某些手机上没有问题，在公司测试的手机上，跳转失效。**问题的原因：** 进过苦苦搜寻，发现导致这个问题的原因竟然是因为我的文件名中有个字母是小写，但是在路由中是大写，是之前做事情的时候疏忽了，改了之后发现没有问题了*
2017-03-30 09:53:57
723
原创 ionic开发---ios上点击输入框，失去焦点的时候，页面白屏
这两天在开发ionic页面的时候，遇到一个很烦的bug，页面元素都是正常的，打包在android上也是正常的，可是在ios上打包却遇到了一个很大的问题。 每次点击输入框，然后点其他地方失去焦点的时候，页面就会出现白屏。找了两天实在找不到是什么原因，但是我加个div，给div设置一个高度，让页面高度比屏幕高度略高，就不会出现这个问题，不知道是因为什么。 如果有人知道这个原因，欢迎留言，不胜感激。
2017-03-03 11:40:41
1059
原创 Ionic之监测网络连接
今天发现目前的app项目还没有对网络连接做处理，于是研究了一下。趁现在搞定赶紧记录下来 在ionic中，我们需要用到codovaNetwork,这个插件输入如下命令引入：cordova plugin add cordova-plugin-network-information接下来放入我刚写的代码：document.addEventListener('deviceready',function()
2016-12-27 16:28:32
927
转载 ionic之Facebook原生登录
https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework
2016-12-20 09:39:23
777
原创 angular中表单的使用
这两天写了个登录注册的页面，其中表单的提示与验证是用angular和h5的属性来写的，由于是ionic项目，所以里面有一些ionic中的css类，话不多说，上代码html代码如下：<form name="sign"> <div class="list"> <label class="item item-input item-
2016-12-05 11:10:27
628
原创 ionic开发之摄像头（camera）的调用
最近项目中遇到了需要调用摄像头的地方，之前一直没有弄好，因为真机运行出现了问题，今天真机运行解决了，使得我怕不急待想试验一下摄像头能否调取成功。 要在ionic中调用camera功能，分一下几步： 1、确保你的项目中已经有ngCordova的注入，如何注入呢？在命令行中输入bower install ngCordova 然后在index中引入<script src="lib
2016-11-29 18:24:36
9820
3
原创 在RDC的日子（一）————学习如何定义接口
这几天，一直在研究cashmax的接口设置，感觉很艰难，也很充实而富有挑战。 在我们之前的印象中，对产品经理的认识简直是太无知，觉得那群产品狗简直一无是处，还成天使唤你干这干那。。。。 但是经过了这几天跟后台对接口，才发现一个好的产品经理是多么重要。设计出一款好的产品真的不是一件容易的事，要在脑子里对前后台有清晰的认识，还需要深切地关心用户体验。虽然，有时候产品狗对前后台很不仁义，，，
2016-11-23 14:38:46
894
原创 使用Ionic自带的datepicker插件
最近在项目中，遇到了一个需要日期的选择框。在网上找了一大堆，挺费劲的。Ionic自带的插件需要重新bower，命令是:bower install ionic-datepicker --save下载完成你就可以在你的lib目录下面看到datepicker文件，在index中引入可以用了，注意要在module中注入<script src="lib/ionic-datepicker/dist/ionic-
2016-09-28 11:27:48
12981
11
原创 使用angular和swiper做的一个滑动小插件
1.这几天一直在研究这个小插件的做法，如图 2.开始想用angular来实现，发现去绑定滑动事件进行判断滑动距离很麻烦，考虑到之前用过swiper这个插件，就尝试用swiper做了一下，很快就成功了。 3.贴出代码来看看吧：html部分，我用的指令来做的，所以html部分很少啦：<ion-content class="padding"> <list-scroll data="lis
2016-09-20 16:50:40
5649
原创 自制一个贪吃蛇小游戏
//直接上代码啦<!doctype html> <html> <head> <meta charset="utf-8"> <title> 贪吃蛇 </title> <script></script> <style> #div{ width:300px;height:300px;background:lightgray;
2016-09-14 10:55:26
719
转载 angularJS 1和2的区别
1.从移动app开发上面分析：Angular 1.x 专注于web开发，没有涉及到移动这方面的内容，还好后来杀出个程咬金IONIC移动app开发框架，让angularjs1.x很好的支持了移动开发Angular 2目标：原生移动支持 – iOS 和 AndroidAngular 2 会有两层，应用层和渲染层。例如一个组件可以用不同的 @View 修饰器修饰，根据运行环境可以在运行时生效。与 Reac
2016-09-07 14:22:46
6976
原创 如何搭建Ionic环境以及打包成安卓apk
经过几天的钻研，终于把Ionic的一份demo成功打包成apk，心里还是有点小激动。写篇文章分享一下。1.Ionic是什么？Ionic的生态系统基于Angular和Cordova，前者是web应用框架，后者是构建和打包原生应用的工具。Ionic是将HTML,CSS,JS,Angular，Cordova等技术进行整合，成为一个非常强大的移动端应用开发平台。2.如何搭建环境？ 如果你现在要使
2016-08-19 10:58:46
13800
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人