发表于: 2020-07-07 23:04:06
1 2172
今天:
早上正常开会讨论了一下进度,然后是方案评审, 被师兄指点出了各处错误,准备按照各项问题写一个demo进行演示。
todo list:
11:30 【方案评审】没过。接下来修改方案和写demo。
前台出现的问题主要有:
-1,调用相机和本地相册要使用微信内置浏览器的js-sdk
-2,使用上拉刷新功能,然后记录当前浏览的位置,不会导致上啦页面刷新该浏览位置变更。
-3,富文本渲染,富文本编辑过的东西(添加了样式)怎么渲染到页面?
-4,点击更多显示更多的字数的demo
17:30 【完成demo:点击显示更多】
这个功能的实现开始认为没什么难度,结果难点出现在如何获取动态的高度上面,不定高是无法实现transition属性进行过渡的,尝试使用vue自带的ref属性进行获取该高度,但是在实现transition的时候出现了问题,该高度不定高,直接写auto不能实现过渡,ref获取的高度属性不能直接赋予class,动态赋值style的话,又会产生和class的冲突,是个小问题,想办法更改下样式,暂时未解决。
vue给dom操作留了一个后门ref,让我们在不得以的情况下使用它完成我们的功能,使用该ref定义一个名称,就可以间接的使用该名称获取该事件的所有属性,而不定高的情况,尝试打印了一下console.dir(显示一个属性的所有信息),从而得知该dom的
scrollheight,也就是扩展后的高度,就是那个不定高。就可以根据这个扩展后的高度,进行动态的style变更,在data里面定义一个对象,里面是关于style的属性
然后赋值该高度:
这个钩子是dom生成后的钩子,在生成dom后把高度赋值那个滚动高度,于是可以使用这个transition属性,达到过渡动画效果。
如果在实际使用中使用for循环渲染的话, 逻辑就会复杂不少,因为同时要渲染每一个card的,每个都不同,要获取每一个的不定高度,然后进行赋值,会相当难受,实际使用中我觉得应该要规定max-height,毕竟只是一个视频简介长度突破天际肯定是不行的。
23:00 【继续未完成 的demo】
1,首先研究下富文本的相关数据如何进行渲染,如果富文本传递的数据是一个带标签的数据,那么使用v-html就可以进行渲染该数据,v-html相当于innerHTML,可以读取把标签转换为实际标签形式,而不是字符串输出。此处的demo在我写显示更多的时候已经写过类似的了。
2,上拉加载更多,下拉刷新功能,根据原型是打算写一个点击加载更多,然后有点跟不上现在的用户体验,就打算变更需求。
原本进行学习,想手写一个,看了下实现方法:
下拉:
监听当前按下的位置,监听原生touchstart事件,记录其初始位置的值e.touches[0].pageY,然后是记录touchmove(移动事件)监听原生 touchmove 事件,记录并计算当前滑动的位置值与初始位置值的差值大于0表示向下拉动,同时也应设置一个允许滑动的最大值;达到最大值则释放刷新,且位置归零。
上拉 :
监听滚动条,监听视窗高度,监听文档高度scrollheight,当滚动条+视窗高度大于文档高度,则触发callback,然后加载更多。
基本原理是这样,但是没手写,因为使用UI框架的相应组件有上拉刷新,UI框架打算使用适配了移动端的mint ui ,相当便利。
然后去看下队友技术分享的视频fixed,原理和懒加载意义,监听滚动,视窗高度,视频顶部高度,进行对比,当滚动+视窗高度>=视频顶部,会使变量为true,然后动态class产生视窗定位属性。
3,查看js-sdk的相应接口,调用相机和本地
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});
就是一个微信的固定写法,没有进行demo。
明天:
把日历写一个demo,然后继续评审。
评论