- 这文档是敌特派来的人写的吗?目的就是为了整死我们搬砖工吗?
事情是这样的。 我司一小破程序,打开时类似这样,显示一个logo,一个标题 [图片] 经过一个2秒的动画效果,logo和标题就移动到上面部分了,同时渐显出来一个loading组件,这些都是使用小程序的Animation API实现的。 [图片] [图片] 现在需求来了。 我们想在首屏渲染后。在图标往上移的动画执行周期中,将背景色缓慢从蓝色变为白色。 (别问为什么要变背景色,我们准备待会加完班拿上弹弓组团去打设计师家玻璃了) [图片] 有朋友会说了,这不是很简单嘛,弄个定时器去替换class不就行了? 我只想说,no no no。朋友,我们搬砖就要有搬砖的样子嘛。 什么时间搬,搬多少,什么时间停,都要严谨嘛。 天真的我,想当然的就拍着胸脯向BOSS表示小意思啦。 [图片] naive的我心里想着 肯定会有动画执行开始和结束一个callback接口的嘛 然鹅,、翻遍了小程序文档里关于动画的各个段落之后才发现 [图片] 神马?? 我不信!一定是我的眼刚刚瞎了,我要再看一遍。 [图片] [图片] [图片] [图片] [图片] PS 看,多么言简意赅的文档! 在看多了外面那些"妖艳贱货"的文档后,如此小清新的文档,还真让我这老司机虎躯一震。 // TODO 我当即在心里暗暗发誓,我一定要强烈建议我司将此文档规范引进并在我司大范围实践,太他【文明用语】高效了。 END PS 在我不懈的努力下 在某毒找到了一篇关于动画重置的实例 [图片] [图片] 哦也,三七三十一,一定是我聋了才没看见这么大个接口 同事心里还在做自我批判,怎么能轻易的就甩锅给腾讯爸爸。 祭出我的Ctrl+F大法 [图片] 果然。还是我太天真。竟然没有搜到 0/0? 在经过了一番苦苦的某毒搜索之后,猛然意识到,或许是我姿势不对? [图片] 谢天谢地,博客园诚不我欺。确实有这个东东。 我默默的打开了唯一的一条搜索结果学习了起来。你猜怎么着? [图片] 我发现了腾讯爸爸藏起来的彩蛋。 哇,没想到小程序团队这么调皮。 在动画相关的所有文档里,竟然半个字都没提有这几个事件。保密工作做的很到位。表扬。5星好评。 [图片] 根据文档,照猫画虎。 [图片] [图片] 控制台没有任何反应 [图片] 一定是我姿势不对,我换换姿势。 [图片] [图片] 一顿操作猛如虎,然鹅发现并没有什么卵用。 [图片] [图片] [图片] 我盯着这条说明,默默的给自己点上了一根烟后陷入了痛苦的沉思。 期间我尝试了各种姿势,都没有找到关于WXSS animation到底是个什么鬼。 我只知道有Animation这个动画API。或许他俩是一个东西? 但是为什么Animation里没有关于它的只言片语? [图片] 既然Animation里没有写,肯定是另外一套体系吧? 灵光一闪, oh no,别又是腾讯爸爸调皮了把文档藏起来了吧。 [图片] [图片] 经过地毯式的搜索及换遍了各种姿势想要跟我的小程序互动一把后。 [图片] [图片] [图片] 我选择死亡。 [图片] [图片] 我想起那天夕阳下调的微信小程序,那是我逝去的青春。。。 IDE: v1.02.1901230 Library: 2.4.2
2019-01-28 - 小程序更改checkbox和radio默认样式
1、checkbox checkbox .wx-checkbox-input{ border-radius:50%; width:20px;height:20px; } checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border-color:#F0302F !important; background:#F0302F !important; } checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:15px; color:#fff; background:transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); } 2、radio radio .wx-radio-input{ border-radius:50%; width:20px;height:20px; } radio .wx-radio-input.wx-radio-input-checked{ border-color:#F0302F !important; background:#F0302F !important; } radio .wx-radio-input.wx-radio-input-checked::before{ border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:15px; color:#fff; background:transparent; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1); } 如果上面的代码对您有帮助,麻烦抖一抖小手点下赞,谢谢
2018-06-29 - 在setData1024KB限制下如何做到无限翻页列表交互?
最近在做一个翻页交互,遇到点setData的坑,最后想了个办法给绕过去了,但我不知道各位有没有更好的办法,在这里分享下我的处理办法; 例如我有个列表,这个列表的总数据量不确定有多少,经我们产品交代,大促期间,至少会有1000条,从小程序的开发文档里可以看到setData对数据的限制是1024KB,因为之前我看文档时没有注意到这一点,所以我一开始在做分页的时候就用了错误的方法,上代码: wxml: [代码] [代码] [代码]<[代码][代码]sku-item[代码] [代码] [代码][代码]wx:for[代码][代码]=[代码][代码]"{{skuList}}"[代码][代码] [代码][代码]skuData[代码][代码]=[代码][代码]"{{item}}"[代码][代码] [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码] [代码][代码]wx:key[代码][代码]=[代码][代码]"{{item.skuid}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码] [代码][代码]skuList: [][代码][代码]},[代码][代码]loadMore: [代码][代码]function[代码][代码]() {[代码][代码] [代码][代码]request([代码][代码]function[代码][代码](res) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]skuList: [代码][代码]this[代码][代码].data.skuList.concat(res.list)[代码][代码] [代码][代码]});[代码][代码] [代码][代码]})[代码][代码]}[代码] [代码] [代码] 好,这样写,问题就出来了,当数据量慢慢的累积起来,就会触发1024KB阈值,后面的数据就算能取回来,也set不进去了。 于是我想了一个解决方案: 把之前的渲染流程拆成两步来做,第1步: 先想办法把每页的坑位给渲染出来,于是我搞了一个skuPage组件, 在这个组件中来单独做每页的sku渲染: wxml: [代码] [代码] [代码]<[代码][代码]sku-item[代码] [代码] [代码][代码]wx:for[代码][代码]=[代码][代码]"{{skuList}}"[代码][代码] [代码][代码]skuData[代码][代码]=[代码][代码]"{{item}}"[代码][代码] [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码] [代码][代码]wx:key[代码][代码]=[代码][代码]"{{item.skuid}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码] [代码][代码]skuList: [][代码][代码]},[代码][代码]methods: {[代码][代码] [代码][代码]setListData: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]let _this = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]skuList: app.globalData.skuList[代码][代码] [代码][代码]});[代码][代码] [代码][代码]app.globalData.skuList = [];[代码][代码] [代码][代码]}[代码][代码]},[代码][代码]ready: [代码][代码]function[代码][代码]() {[代码][代码] [代码][代码]this[代码][代码].setListData();[代码][代码]}[代码] [代码] [代码] 在外部页面中调用skuPage组件: wxml: [代码] [代码] [代码]<[代码][代码]sku-page[代码] [代码] [代码][代码]class[代码][代码]=[代码][代码]"sku-page"[代码][代码] [代码][代码]wx:for[代码][代码]=[代码][代码]"{{pageWrapCount}}"[代码][代码] [代码][代码]wx:key[代码][代码]=[代码][代码]"{{index}}"[代码][代码] [代码][代码]actId[代码][代码]=[代码][代码]"{{actId}}"[代码][代码]/>[代码] [代码] [代码] js: [代码] [代码] [代码]data: {[代码] [代码] [代码][代码]pageWrapCount: [][代码][代码]},[代码][代码]loadMore: [代码][代码]function[代码][代码]() {[代码][代码] [代码][代码]app.globalData.skuList = res.list;[代码][代码] [代码][代码]request([代码][代码]function[代码][代码](res) {[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]pageWrapCount: [代码][代码]this[代码][代码].data.pageWrapCount.concat([1])[代码][代码] [代码][代码]});[代码][代码] [代码][代码]})[代码][代码]}[代码] [代码] [代码] 好,这样我们把取回的数据先不要立马set进去,而是把它先丢在global里,然后让坑位+1,这样skuPage就会新增一个,就会触发skuPage的ready钩子函数,这个时候再在skuPage的ready钩子中,从global中把list取过来丢给skuPage组件的skuList,让skuPage组件去渲染,这样就能绕开setData的1024KB上线,因为每次针对于坑位来说 [代码] [代码] [代码]this[代码][代码].setData({[代码] [代码] [代码][代码]pageWrapCount: [代码][代码]this[代码][代码].data.pageWrapCount.concat([1])[代码][代码]});[代码] [代码] [代码] 我只对pageWrapCount数组push(1); 就算有1024KB限制,那也远远足够了,除了此种办法外,各位还有更好的办法么?欢迎共享经验
2018-05-25