项目背景
这个页面是用vue构建,用来内嵌APP中进行用户反馈交互,反馈页面是一个web聊天记录页面,也可以编辑内容上传图片发送对话。
踩到的坑
1、每一条对话数据需要显示数据时间,连续一分钟内的几条对话数据只显示第一条对话的时间。通过v-for循环列出数据时间,每一条循环通过index去判断当前item与index-1的item的时间差,但是第一条会报错,因为取不到第0条的数据。
解决方案:因为vue数据绑定属性只能写变量,不能写语句,所以就无法在标签中去判断是否是第一条数据。就算是用二元操作符也无法识别,所以用(dialogItems[index-1] && dialogItems[index-1].createDate) || 0)
就可以筛选出第一条,并把他的上一条设为0
.
2、后端返回的时间格式是2017-10-10 13:30:00
的格式,所以用Date.parse()
来转化成时间戳进行比较,但是在手机端无法识别-
格式的时间,所以Date.parse()
无效,需要用.replace(/-/g,'/')
来转化成/
格式,再用Date.parse()
3、对话页面需要一进入就把页面拉到最底部来显示最新对话,可以用scrollTo(0,列表高度)
来让页面滚动到底部。
4、输入页面的输入框textarea
需要根据输入文本高度增加而增加,可以用vue的input事件来监听textarea的scrollHeight
,使他的高度等于scrollHeight即可动态变高。
5、编辑页面上传图片需要有删除功能,但是当点击删除时,src数据绑定的变量清空后,src并没有清空,需要再把src设为一个字符串,这样页面上的图片便可删除,也可以用vue的$nextTick
的回调方法来清空。
6、上传图片使用formData来提交,但是一直提交不过去,后来得知,是项目有axios的config配置,把上传的内容给序列化了,在axios中设置header:multipart/form-data
,然后在config中去匹配该header使其不序列化即可。
7、在对话列表页点击编辑需要跳转到反馈编辑页面并自动弹出手机软键盘,使用focus()方法可以弹出。但是需要在对话列表页点击按钮才弹出,直接进入编辑页面并不会弹出。猜测是手机监测用户交互行为所设的屏障。
8、上传完照片后,有个替换功能,可以重新选择照片,就是点击替换按钮去触发input事件,这里有的mouseEvent
,
1 | const evt = new MouseEvent( 'click', { bubbles: false, cancelable: true, view: window } ); |
这样就可以触发input file
的点击事件
(完)