用WeX5製作PPT

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語句就能實現很多有意思的應用效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章