如今微信H5開發(fā)越來越頻繁，很多設計師也開始轉行來學習移動H5開發(fā)，除了設計一些精美的UI界面以外，自己也想編輯一些高效性能的前端H5代碼。

比如目前最常見的 應該是微信h5的滑動翻頁效果吧。無論是縱向滑動翻頁，還是橫向滑動翻頁，在配合CSS3動畫效果組件就可以快速完成一個絢麗的H5案例。

比如這樣的H5的開發(fā)案例：比如麗人麗妝2015年招聘的h5頁面宣傳

今天，25學堂跟愛好微信h5開發(fā)的童鞋們分享一個高性能H5全屏滑動組件。

該H5滑動翻頁效果組件名稱：iSlider ??

該H5滑動翻頁效果組件的廣告語就是：如絲般高性能H5全屏滑動組件

1、簡潔, 易用, 半行代碼搞定.

2、性能卓越, 如絲般高性能全屏動畫滑屏組件.

3、耦合完全分離, 更輕量, 無CSS依賴,無任何js庫依賴.

4、一個組件只做一個事情, 專注于頁面滑動, 避免冗余 , 保證性能.

官網：http://kele527.github.io/iSlider/

微信h5開發(fā)之滑動翻頁效果組件推薦：iSlider的Demo演示：

縱向的H5的滑動效果：可以掃描下面的二維碼進行預覽。

橫向的H5的滑動效果：可以掃描下面的二維碼進行預覽。

2個H5的滑動翻頁效果的源碼可以參考這2個案例。

DEMO1: 垂直滑動? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??DEMO2: 水平滑動

分為2個步驟來學習和實踐：

第一步：打開案例，查看源碼。

第二步：復制源碼到本地電腦上，自己修改對應的圖片和參數即可。當然，這個過程是需要你懂一些基本的前端代碼知識。

第三步：這個不太會用，可以用這個H5滑動插件

一直用的是swiper.js這個, 感覺很不錯。

官方地址：http://www.idangero.us/swiper

中文地址：http://www.swiper.com.cn

如果還有不明白的，可以加25學堂的群來咨詢。