fullpage效果實(shí)現(xiàn)：

情景需求：頁(yè)面分為上下塊红淡，上方固定高魔策，下方不固定高氓皱，做fullpage效果滞造。如圖：

Paste_Image.png

fullpage效果方案探索一:

采用小程序組件:scroll-view。
先說(shuō)個(gè)結(jié)論：這種方案實(shí)現(xiàn)不了fullpage效果买窟，因?yàn)槲覠o(wú)法阻止該組件的scroll事件丰泊。
再來(lái)談為什么要用這個(gè)組件：在小程序中，當(dāng)以手勢(shì)滑動(dòng)屏幕的時(shí)候始绍，會(huì)拉扯頁(yè)面波動(dòng)瞳购。導(dǎo)致fullpage 效果不那么完美。所以設(shè)想：利用scroll-view組件亏推，當(dāng)手勢(shì)滑動(dòng)時(shí)候学赛，頁(yè)面也跟隨滑動(dòng)（這樣可以避免頁(yè)面波動(dòng)），滑到一定位置頁(yè)面自動(dòng)切換到下一屏幕吞杭。但是很可惜盏浇，愿望是美好的，現(xiàn)實(shí)是殘酷的芽狗。小程序的scroll-view組件绢掰，沒(méi)法阻止scroll事件。

fullpage效果方案探索二:

采用swiper方案
這里有個(gè)坑：在體驗(yàn)小程序時(shí)候译蒂，swiper 有縱向方向曼月。但是去文檔中查找，咋么也找不到柔昼。幸好有高人指點(diǎn)哑芹，設(shè)置"vertical=true"即可。不然這一方案也被否定了捕透。

fullpage效果方案探索三:

自己動(dòng)手
步驟一：封裝一個(gè)判斷手勢(shì)方向的函數(shù)
步驟二：結(jié)合動(dòng)畫(huà)API animation 滑動(dòng)頁(yè)面

數(shù)字run起來(lái)效果實(shí)現(xiàn)

情景需求：當(dāng)點(diǎn)擊卡片的時(shí)候聪姿，卡片中間顯示一個(gè)數(shù)字，數(shù)字從0跑到100乙嘀。如圖所示：

Paste_Image.png

數(shù)字效果方案探索一：

采用定時(shí)器
關(guān)于這一塊核心代碼：

timer && clearInterval(timer);
timer = setInterval(function() {
  if (startPercent >= endPercent) {
    clearInterval(timer);
    return;
  }
  startPercent++;
  option.start_percent = startPercent;
  me.setData({
    topics: topics
  });
}, 10);

但是在微信開(kāi)發(fā)工具或者真機(jī)上末购，數(shù)字跑起來(lái)有明顯的卡頓現(xiàn)象，感覺(jué)小程序?qū)Χ〞r(shí)器支持不好；⑿弧盟榴！

數(shù)字效果方案探索二：

優(yōu)化定時(shí)器代碼：降低設(shè)置setData({})的頻率，由startPercent++ 改為startPercent+=2; 延長(zhǎng)定時(shí)器的時(shí)間婴噩，由10ms改為20ms擎场。理由：在一定時(shí)間內(nèi)羽德，減少DOM操作(個(gè)人理解)。

timer && clearInterval(timer);
timer = setInterval(function() {
  if (startPercent >= endPercent) {
    clearInterval(timer);
    return;
  }
  startPercent+=2;
  option.start_percent = startPercent;
  me.setData({
    topics: topics
  });
}, 20);

但事實(shí)是：沒(méi)有鳥(niǎo)用,卡頓依然存在迅办。

數(shù)字效果方案探索三：

采用requestAnimationFrame
requestAnimationFrame是瀏覽器用于定時(shí)循環(huán)操作的一個(gè)接口宅静，類(lèi)似于setTimeout, 主要用途是按幀對(duì)網(wǎng)頁(yè)進(jìn)行重繪。具體的就不在這介紹了站欺！

timer = requestAnimationFrame(runNum);
function runNum(){
   if(startPercent >= endPercent){
    cancelAnimationFrame(timer);
    return;
  }
  startPercent++;
  option.start_percent = startPercent;
  me.setData({ 
    topics: topics 
  });
  timer = requestAnimationFrame(runNum);
}

但事實(shí)是：小程序在ios 居然不支持requestAnimationFrame姨夹，報(bào)錯(cuò)！矾策！只好放棄磷账。另外在安卓上，卡頓現(xiàn)象也依然存贾虽。

數(shù)字效果方案探索四：

采用canvas够颠，利用canvas 和定時(shí)器畫(huà)數(shù)字。事實(shí)發(fā)現(xiàn)：卡頓消失了榄鉴，但存一些bug。先來(lái)分析卡頓為什么消失了蛉抓？個(gè)人覺(jué)的是：利用canvas,可以免去setData({topics: topics})這一步（類(lèi)似于不操作DOM）庆尘，所以整個(gè)畫(huà)面變得十分流暢。再來(lái)說(shuō)bug:

• canvas遇到transform等巷送，并不會(huì)隨著父級(jí)進(jìn)行transform,而是保留在原地驶忌。

最后，再總結(jié)一些開(kāi)發(fā)微信小程序遇到的坑：

• promise語(yǔ)法 在不同的開(kāi)發(fā)工具版本中笑跛，支持情況不一樣付魔。在0.10版本中支持，在0.11版本中不支持
• requestAnimationFrame 在IOS 中報(bào)錯(cuò)
• canvas 并不會(huì)隨著父級(jí)進(jìn)行transform飞蹂，而是保留在原地几苍； canvas需添加id,且id 名不能重復(fù)，否則畫(huà)布狀態(tài)為：display:none;