实际开发问题
关注
分享
扫一扫
文章平均质量分 56
_Nana_
这个作者很懒，什么都没留下…
展开
-
fixed元素遮挡下面元素的问题
网页实际开发中会遇到fixed置顶元素，有时需要由后端决定是否显示。所以在布局上注意fixed元素遮挡问题。具体解决办法如下：html<div id="fixed_wrap"> &am原创 2018-10-15 14:00:50 · 14467 阅读 · 0 评论 -
异步请求加锁
场景：不断加载的图片列表（发送图片列表请求），每次从后台传回offset，下次请求带上传回的offset。BUG发现中：快速滑动加载更多时，同一个offset会发送两次。原因分析：offset是后端返回后异步setData（微信小程序写法）到data（store）中的，异步存储没有结束就读取offset发送请求获取的是上次的offset。解决对策 —— 上锁原创 2019-01-10 14:36:18 · 2092 阅读 · 0 评论 -
JS 今天/明天的日期
//今天的日期var today = new Date();today.setTime(today.getTime());var todayStr = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate();//明天的日期var tomorrow = new Date();tomorrow.setTi...原创 2019-03-19 19:01:19 · 5073 阅读 · 0 评论 -
nginx使用相关命令与配置
启动安装的nginx服务：首先，Mac默认安装的nginx目录位于/usr/local/etc/nginx/，启动时命令为brew services start nginx，修改配置文件为vim nginx.conf.default，然后重启服务brew services restart nginx。项目中配置nginx文件：在项目根目录中配置nginx.conf，如：http {...原创 2019-03-20 18:31:00 · 197 阅读 · 0 评论 -
针对火狐的CSS样式设置
在工作中发现，有些效果在chrome浏览器中能实现的效果，在火狐下没有，比如截几行，在chrome下通过下述代码实现：display: -webkit-box;overflow: hidden;/*text-overflow: ellipsis;*/-webkit-line-clamp: 2;-webkit-box-orient: vertical;网上的一种方法已经失效：@-mo...原创 2019-03-13 18:03:34 · 5814 阅读 · 0 评论 -
阻止苹果xs max浏览器页面整体滚动
今天发现一个神奇的现象，在苹果xs max型号手机上滑动一个列表页面，整个页面（包括顶部fix的头组件）都在滑动，网上称之为橡皮筋效果。页面的滚动看起来比较乱，其实知道原理可以分析出：外层的滚动（上下会出白色无内容空间）是由于body在touchmove时发生了滚动，内层的滚动（如列表内容在页面空间内滑动）是由于页面组件在touchmove时发生了滚动。其实际上是个冒泡问题，解决办法是阻止...原创 2019-04-26 17:44:07 · 1331 阅读 · 1 评论 -
使用js添加script标签
在开发中可能遇到需要使用到某个js里的方法，但是页面是后端返回的，不方便让后端添加js的时候（同一个页面的模版可能多个页面使用，只有一个页面需要引入js时，最好不要修改模版），可以通过js代码进行添加：var secScript = document.createElement("script");secScript.setAttribute("type", "text/javascript"...原创 2019-04-25 18:07:22 · 10040 阅读 · 0 评论 -
百度小程序 / 快应用使用nanachi开发注意事项
百度小程序页面相关：⚠️ 不要设置全局的margin/padding样式，如：*{margin: 0; padding: 0}会导致视频的播放按钮错位1、scroll-view中不能使用video解决办法：页面的最外层父级使用div，不使用scroll-view，也可以实现页面滑动的效果截图自百度小程序开发官网：https://smartprogram.baidu.com/docs...原创 2019-05-29 14:42:17 · 751 阅读 · 0 评论 -
React操作DOM —— 添加查看原图按钮的图片点击事件
时刻提醒自己React的生命周期，镇楼图：需求：点击页面中的图片获取到全部图片的src以及当前图片的index。麻烦点：页面是react编写；页面显示的数据均是由后端以拼接html形式传过来的，img也在html拼接结果中。踩坑过程：首先，不能在componentDidMount中获取到imglist，因为componentDidMount最后才异步获取后端接口数据，所以想在co...原创 2018-12-11 20:06:47 · 3187 阅读 · 0 评论 -
JS原生操作DOM（更新中）
在React项目中有时需要原生的JS操作DOM（项目没有引用jquery库），这里持续更新一些方法：一、父子节点中插入中间层（div等）最近在做一个需求，一个后端返回的html代码中给图片加“查看原图”按钮，由于需要基于父元素定位，所以要用div将原有的img包起来，并且在img后加入input标签，需要用到插入中间层的功能。思路：通过img获取到父元素，在父元素中添加新的div子元素，然后...原创 2018-12-21 14:43:06 · 585 阅读 · 0 评论 -
无处安放的居中（未解决）
面试时总问到几种方式实现居中，当时觉得很奇怪，为什么需要了解那么多方式实现一个效果，等到真正做需求才发现，根据不同的场景可能有不同的限制，只掌握一种方式是不能实现各种情况下的居中需求。需求：让后端返回的富文本中div的img居中两种方式（都存在问题）：一、div设置为text-align: center; width: 100%，img自然居中。问题：如果div中还有文字等内容，也会变成...原创 2018-12-20 15:46:10 · 260 阅读 · 0 评论 -
媒体查询尺寸参考
/* 媒体查询*/@media screen and (min-width: 320px) {}@media screen and (min-width: 360px) {}@media screen and (min-width: 375px) {}@media screen and (min-width: 414px) {}@media screen and (min-wid...原创 2018-10-19 11:31:50 · 1522 阅读 · 0 评论 -
ellipsis 一行/两行省略
<!DOCTYPE html><html><head> <style type="text/css"> /* 一行 */ .test { text-ov原创 2018-10-22 16:14:51 · 1120 阅读 · 0 评论 -
列表标题一/两行垂直居中展示
在开发中会遇到很多list组件，例如左边一个img，右边是内容介绍。内容介绍的最上部往往是内容的标题，标题在进行省略ellipsis设置时，需要考虑产品需求：比如我在项目中，设计希望两行充满高度，一行则垂直居中。解决办法是flex实现，具体如下：html<div class=&原创 2018-10-26 19:28:13 · 1039 阅读 · 0 评论 -
前后端交互方式（同一页面并行开发、变量传递）
刚做完一个项目的改进需求，总结一些项目心得，主要有两方面：同一个页面，前后端各负责几个模块开发，如何页面整合？前端如何从后端获取数据？1 前后端按模块开发同一页面首先，在这个项目中没有用到vue、react这些框架，实现页面的一种做法是前端通过html/css/js把页面搭建出来，再交由后端改造成ftl/jsp等模版页面，但是这个过程造成前后端开发的不同步；另一种做法是前端负责开发一...原创 2018-10-30 17:52:04 · 841 阅读 · 0 评论 -
【开发】【提测】前端注意事项（更新中）
切图页面结构需要考虑，比如一个模块的左右两部分，因为在一个模块中，所以根节点应该只有一个，然后采用flex布局；行内元素和块级元素应该不在同一级放置，将行内元素用<div>包起来；设计图 --&a原创 2018-10-30 18:56:36 · 759 阅读 · 0 评论 -
最简单快速理解jsonp
我比较喜欢想明白原理再做代码实现，在研究了一些博客后发现jsonp的原理非常简单：本地（需要调用数据的一方）写好一个函数比如叫ineed，函数里包含需要的远程数据data；远程（存有数据的一方）文件中调用ineed，传参为json格式，里面包含data；以上。代码实现：本地 <script> var ineed = function(result){ co...原创 2018-11-09 11:04:49 · 243 阅读 · 0 评论 -
项目中的奇葩滚动问题
1、touch项目：⚠️注意：如果是多个橫划组件只显示一个，需要一开始都显示，新建橫划组件，然后再新建后隐藏（不然没法计算宽度等，bug效果是滑动弹回）；2、node项目：⚠️注意：子子子…组件高度变化（如展开／收起条目），父组件的Scroller不改变高度，现用的办法是从父组件传递一个函数funSta到子组件，函数的功能是改变父组件的state里一个变量，子子子…组件在点击展开／收起按钮的...原创 2018-11-23 20:08:50 · 315 阅读 · 0 评论 -
楼层跳跃思路——页面导航实现锚点
楼层跳跃是移动端App常见的模块，实现功能是页面模块引导、快速定位到用户选择模块。以大众点评 - 餐厅详情页面为例：楼层跳跃有几个点需要考虑：1、何时出现以及在页面滑动中置顶；2、计算各模块offset和height；⚠️如果页面有异步加载数据（模块动态加载），需要等数据异步返回后再计算各模块offset和height（全部返回判断采用count计数）；3、导航点击时，已经选中的条目...原创 2018-12-13 19:45:59 · 826 阅读 · 0 评论 -
Node.js —— Egg.js实现excel文件上传下载
关于上传原创 2019-08-07 19:51:12 · 2426 阅读 · 0 评论