【前端|UNIAPP|NVUE】NVUE下SWIPER组件需求一例 最近用swiper做了一个滑动相册,然后相册滑动的过程中,会涉及一些弹窗提示,权限弹窗的一些配置,因为中间还涉及了video原生组件的问题,(编译了App).由于甲方的需求,要求弹窗提示要在下一张完全显示之前就出现.然后就开始尝试,首先@transition肯定是要用到的,然后原本打算的是配合@change就好,但是发现并不能完美实现想要的效果,于是又改用@animationfinish,发现在nvue下获取不到current,查阅文档发现如下提示:[v_error]如果 nvue 页面 @animationfinish 事件不能返回正确的数据，可同时监听 @change 事件。[/v_error]也就是说,nvue下还得同时调用@change才能获取到current.此时@change方法里可以不执行任何操作,把原本@change的操作放到@animationfinish里,然后@transition里判断滑动到一定位置的时候判断是否弹出提示即可.仅做记录,nvue下只调用@animationfinish不能访问正确的数据,可同时监听@change事件,也就是要同时调用三个方法.

【前端|JavaScript】一种比较"偏门"的数据格式处理 最近在写前端的时候碰到一种比较"偏门"的数据格式,大致如下: [pre lang="JSON"] data: { civil: { 0: '3000-4500', }, criminal: { 0: '1500', 1: '2000', 2: '3000', }, administrative: { 0: '2500-3750', }, charge: { 0: { '0-2': '800', }, 1: { '2-10': '4', }, 2: { '10-50': '3', }, 3: { '50-100': '2', }, 4: { '100-500': '1', }, 5: { '500-1000': '0.5', }, 6: { '1000-5000': '0.2', }, 7: { '5000-Infinity': '这是最终的处理方式', }, }, },[/pre]算是一个多维的数组对象?需求大概是这样子的,根据条件分别取到对应层级下的某个key范围内的值,也就是比如我当前条件是要求取charge下的2-10之间的对应值,直接用下标取肯定是不合适的,这个时候呢,就只能用如下的方法去取,(仅记录,可能有更优的方法?欢迎交流)设定已经把上面格式赋值给了data变量,那么就会有如下代码: [pre lang="javascript"] let charge = data.charge; Object.values(charge).map((item)=>{ //>Object.keys取下标,也就是取(2-10,10-50)这个下标 console.log(Object.keys(item)); //>Object.values取值,通过条件对比是否在下标范围内,在下标范围内则进行赋值或者对应操作. console.log(Object.values(item)) }) [/pre]以上,记录下来防止以后再碰上忘记.欢迎各位大佬指教.

【前端|uniapp】nvue踩坑一例-video不识别本地缓存路径 近期在一些项目需求下，写了个nvue页面，大致就是swiper组件嵌套video这种需求。。。众所周知，打包成app的时候，video层级比较高。有可能会有各种问题。。。所以就用了nvue...然而，在踩过了一个又一个的坑以后。。。终于，在某个需求丢过来的时候，彻底难住了。。。就是要视频预加载（其实就是先把视频下载到本地，然后本地路径再赋值给video->src)...真的是万万没想到。downloadFile和saveFile都走通了（这中间莫名的有好几次不走回调的问题→_→，重新编译了几次好了。），但是。。。nvue下video不识别本地缓存路径。。。折腾了一天。。。最后从搜索引擎获取到了解决方案：在manifest.json里找到“app-plus"一项，添加 "runmode":"liberate",保存。重编译。问题解决

【VSCode】ES-LINT提示插件提示屏蔽（非语法错误） 最近在用VSCode写代码的时候发现，ES-LINT会有一些莫名的提示，比如，我注释习惯用 //> 这样子的开头。。。但是在ES-LINT的默认提示里就会说必须在注释里强行加空格，也就是要 // >这样，才不会出错。。。又比如 我写一个switch, 根据习惯来说，case是不会和switch持平的。。。但是es-lint默认要求他们持平才不报错。。。综上所述，虽然编译过程中并不报错，但是编辑器里的这种提示很是扎眼。。。一通搜索之后，在.eslintrc的rules里增加如下规则： //>注释后不加空格 "spaced-comment": [ 0, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] } ]， //>switch对齐 "indent": [ 2, 2, { "SwitchCase": 1 } ],

vue|uni-app引入保利威，切换视频403一例 近期因为项目需要，引入保利威的点播SDK的时候碰到了一些问题。主要还是403的报错。如返回所示，403一般是请求出错，没权限导致。DEBUG期间检查了token，ts，sign的传值，可以确认应该是不存在异常的情况。与客服深入交流了一番。无果。最后想起了是不是因为API请求“时间差”的问题,重新请求token之后，在调用changeVid的时候设置了个1秒的延时，居然就神奇的好了。。。 this.requestToken(); setTimeout(()=>{ const params = { vid:news, watchStartTime:Number(0), autoPlay:'on', ts:this.ts, sign:this.sign, playSafe:this.safeToken } this.player.changeVid(params); },1000)