【原】移動web滑屏框架分享

時間 2019-11-13

標籤移動 web 框架分享欄目無線简体版

原文原文鏈接

本月26號參加webrebuild深圳站，會上聽了彪叔的對初心的講解，「工匠精神」這個詞又一次被提出，也再次引發了我對它的思考。專一一個項目並把它作得好，很好，更好...現實工做中，忙忙碌碌，抱着完成任務的想法可能會比較多，而想作得更好，需不惜花費時間精力，孜孜不倦，反覆改進產品，把99%提升到99.99%，實在是不容易，那麼專業，敬業也是少不了的~javascript

這裏也是給本身作個提醒，保持作事的熱情和激情，哪怕之後產品發展得很差，對提高自身能力仍是頗有幫助~html

進入主題，如今很流行在H5頁面滑屏的效果，特別是在微信瀏覽器窗口中，幾乎不少推廣的活動是使用到上下滑屏，一開始和前端的同事一塊兒合做寫滑屏效果花費了不少的時間，並且寫出來的頁面在瀏覽器的兼容上踩了不少坑，因而果斷採用了框架。前端

最初接觸是使用iscroll4.js的框架，畢竟它是比較成熟的，用起來會讓人以爲放心，惋惜它在android2.3下滑屏效果兼容性不是很好，另外還有一個缺點是這個框架的有25K，爲了一個滑屏的效果加載25K的代碼是不划算的~java

後來找了2個比較簡單的(輕量、少bug)，這裏推薦給你們，有須要的同窗不要錯過。android

(有些同窗會問：爲何不使用左右滑屏呢？緣由之一是在微信瀏覽器中，向右滑動屏幕可能致使用戶退出當前頁面)ios

下面給2個上下滑屏的例子~git

實例一，簡單的上下滑屏github

實例二，簡單的上下滑屏，滑動中附加了動畫~web

設計滑屏框架的辦法通常有2種瀏覽器

控制父容器法
控制子容器法

控制父容器法

經過控制父元素的transform: translateY或margin-top或top的值來上下滑動頁面，每次的位移的取值爲當前頁面高度~

這裏採用slip框架，庫大小5.75K，很是輕量，能夠放心用在你的項目~

slip框架的頁面樣式須要自定義，不過這裏我簡單寫好了~

(若是你不使用框架，推薦用transform: translate(X,Y)的寫法，首先transform: translate可設計高性能動畫，其次兼容android2.3+的系統，transform: translateY不兼容android2.3的系統)

兼容ios5+、android2.3+系統，其滑屏功能，響應靈敏~若是你只須要設計簡單的滑屏效果，可考慮它~

slip框架更多詳細的功能猛擊這裏https://github.com/binnng/slip.js

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>slip</title>
<style>
*{padding: 0;margin: 0;}
/*框架*/
.swipe-wrap{width: 100%;height: 100%;position: relative;overflow: hidden;}
.swipe{position:absolute;width:100%;}
.swipe-box{width: 100%;overflow: hidden;}
</style>

</head>

<body> 

<div class="swipe-wrap" id="slip">
    <article class="swipe">

        <div class="swipe-box" style="background-color: gray;">
        第1屏
        </div>

        <div class="swipe-box" style="background-color: green;">
        第2屏
        </div>

        <div class="swipe-box" style="background-color: orange;">
        第3屏
        </div>

        <div class="swipe-box" style="background-color: blue;">
        第4屏
        </div>

    </article>
</div>

</body>

<script type="text/javascript" src="js/slip.min.js"></script>
<script type="text/javascript">
var container = document.getElementById('slip');
var pages = document.querySelectorAll('.swipe-box');
var slip = Slip(container, 'y').webapp(pages);
</script>

</html>

下載demo

控制子容器法

方法是隻顯示其中一個子元素，其它隱藏，滑屏時隱藏當前元素，並顯示當前元素的下一個同輩元素~

這裏採用fullPage框架，庫大小7.69K~

fullPage框架的頁面樣式無需自定義，已有寫好的

兼容ios5+、android2.3+、winphone 8系統，其滑屏功能，效果比較豐富，支持縮放、旋轉、透明度、自動滑屏等動畫效果~若是你須要設計精彩的滑屏效果，可考慮它~

fullPage框架更多詳細的功能猛擊這裏https://github.com/powy1993/fullpage

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>fullPage</title>
<style>
*{padding: 0;margin: 0;}
/*框架*/
body{overflow: hidden;}
.page-wrap{overflow:hidden}
.page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}
.contain{width:100%;height:100%;display:none;position:relative;z-index:0}
.current .contain,.slide .contain{display:block}
.current{display:block;z-index:1}
.slide{display:block;z-index:2}
.swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}
</style>
</head>

<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->

<!-- 框架[[ -->
<div id="pageContain" class="page-wrap">
    
    <div class="page page1 current" style="background-color: green;">
        <div class="contain">
            第一屏
        </div>
    </div>

    <div class="page page2" style="background-color: yellow;">
        <div class="contain">
            第二屏
        </div>
    </div>

    <div class="page page3" style="background-color: gray;">
        <div class="contain">
            第三屏
        </div>
    </div>

    <div class="page page4" style="background-color: purple;">
        <div class="contain">
            第四屏
        </div>
    </div>
</div>
<!-- 框架]] -->

</body>

<script type="text/javascript" src="js/fullPage.min.js"></script>
<script type="text/javascript">
//禁止窗口的默認滑動 20190121更新
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默認的處理方式(阻止下拉滑動的效果)
}, {passive: false}); //passive 參數不能省略，用來兼容ios和android



//框架
var runPage,
    interval,
    autoPlay;

autoPlay = function(to) {

    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 5000);

}

runPage = new FullPage({

    id : 'pageContain',                            // id of contain
    slideTime : 800,                               // time of slide
    continuous : true,                             // create an infinite feel with no endpoints
    effect : {                                     // slide effect
        transform : {
            translate : 'Y',                       // 'X'|'Y'|'XY'|'none'
            scale : [1, 1],                       // [scalefrom, scaleto]
            rotate : [0, 0]                       // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
    mode : 'wheel,touch',               // mode of fullpage
    easing : 'ease',                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    // callback : function(index, thisPage) {

    //     index = index + 1 > 3 ? 0 : index + 1;
    //     autoPlay(index);
    // }
});

// interval = setTimeout(function() {
//     runPage.go(runPage.thisPage() + 1);
// }, 5000);

</script>
</html>