html5做PPT不是什麼新鮮事了,你看現在的易企秀做的網頁版的PPT多漂亮,但是我們自己能不能做出類似的效果呢。
最近研究了下用WeX5做PPT,要做PPT從框架上講要實現這樣幾個功能:1.點擊進入下一頁;2.上滑進入下一頁,下滑進入上一頁;3.當然如果支持左右滑動翻頁也挺好;
最先想到的就是使用contents組件,這個組件本身就能實現左右滑動翻頁的效果,那麼我們先做個簡單的,增加點擊進入下一頁的效果
這個不難,只要給contents綁定一個單擊事件就可以了,
Model.prototype.contents1Click = function(event){
this.comp('contents1').next();
};
然後就是在每個content頁中增加scrollView組件,並給這個組件綁定上滑和下滑事件
對應的js代碼如下:
Model.prototype.scrollView2PullUp = function(event){
this.comp('contents1').next();
};
Model.prototype.scrollView2PullDown = function(event){
this.comp("contents1").prev();
};
大功告成,WeX5版的PPT框架製作完成,你也來試試吧
小結:很多我們苦苦思考的難題,常常可以通過我們已知的組件的靈活運用就能達到很奇妙的效果。這裏也要贊一下起步軟件WeX5開發工具,讓開發者不再需要關心很多底層的技術細節問題,只需要簡單配置和普通js語句就能實現很多有意思的應用效果。