fullpage效果实现:
情景需求:页面分为上下块,上方固定高,下方不固定高,做fullpage效果。如图:
布局:
似乎这种情景,在小程序中只能采用纵向的flex布局,别无他法。上方固定高,下方flex:1;
fullpage效果方案探索一:
采用小程序组件:scroll-view。
先说个结论:这种方案实现不了fullpage效果,因为我无法阻止该组件的scroll事件。
再来谈为什么要用这个组件:在小程序中,当以手势滑动屏幕的时候,会拉扯页面波动。导致fullpage 效果不那么完美。所以设想:利用scroll-view组件,当手势滑动时候,页面也跟随滑动(这样可以避免页面波动),滑到一定位置页面自动切换到下一屏幕。但是很可惜,愿望是美好的,现实是残酷的。小程序的scroll-view组件,没法阻止scroll事件。
fullpage效果方案探索二:
采用swiper方案
这里有个坑:在体验小程序时候,swiper 有纵向方向。但是去文档中查找,咋么也找不到。幸好有高人指点,设置"vertical=true"即可。不然这一方案也被否定了。
fullpage效果方案探索三:
自己动手
步骤一:封装一个判断手势方向的函数
步骤二:结合动画API animation 滑动页面
数字run起来效果实现
情景需求:当点击卡片的时候,卡片中间显示一个数字,数字从0跑到100。如图所示:
数字效果方案探索一:
采用定时器
关于这一块核心代码:
timer && clearInterval(timer);
timer = setInterval(function() {
if (startPercent >= endPercent) {
clearInterval(timer);
return;
}
startPercent++;
option.start_percent = startPercent;
me.setData({
topics: topics
});
}, 10);
但是在微信开发工具或者真机上,数字跑起来有明显的卡顿现象,感觉小程序对定时器支持不好!!
数字效果方案探索二:
优化定时器代码:降低设置setData({})的频率,由startPercent++ 改为startPercent+=2; 延长定时器的时间,由10ms改为20ms。理由:在一定时间内,减少DOM操作(个人理解)。
timer && clearInterval(timer);
timer = setInterval(function() {
if (startPercent >= endPercent) {
clearInterval(timer);
return;
}
startPercent+=2;
option.start_percent = startPercent;
me.setData({
topics: topics
});
}, 20);
但事实是:没有鸟用,卡顿依然存在。
数字效果方案探索三:
采用requestAnimationFrame
requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout, 主要用途是按帧对网页进行重绘。具体的就不在这介绍了!
timer = requestAnimationFrame(runNum);
function runNum(){
if(startPercent >= endPercent){
cancelAnimationFrame(timer);
return;
}
startPercent++;
option.start_percent = startPercent;
me.setData({
topics: topics
});
timer = requestAnimationFrame(runNum);
}
但事实是:小程序在ios 居然不支持requestAnimationFrame,报错!!只好放弃。另外在安卓上,卡顿现象也依然存。
数字效果方案探索四:
采用canvas,利用canvas 和定时器画数字。事实发现:卡顿消失了,但存一些bug。先来分析卡顿为什么消失了?个人觉的是:利用canvas,可以免去setData({topics: topics})这一步(类似于不操作DOM),所以整个画面变得十分流畅。再来说bug:
- canvas遇到transform等,并不会随着父级进行transform,而是保留在原地。
最后,再总结一些开发微信小程序遇到的坑:
- promise语法 在不同的开发工具版本中,支持情况不一样。在0.10版本中支持,在0.11版本中不支持
- requestAnimationFrame 在IOS 中报错
- canvas 并不会随着父级进行transform,而是保留在原地; canvas需添加id,且id 名不能重复,否则画布状态为:display:none;