weui 多網頁切換效果分析

本文轉載自查看原文 2016-12-24 14:18 20099 css/ jQuery/ 微信公眾號開發/ javascript

weui的文檔寫的不怎么詳盡，簡單的來講WeUI 為微信 Web 服務量身設計的h5框架。

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、icon等各式元素。

嚴格的講它是一個css庫。算一個精簡的庫。

如果要用jQuery開發的話，head部分，需要加載如下信息：

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
        <title>我的</title>
         <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" /> //weui的壓縮版css
         <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css"> //jQuery weui的壓縮版css，因為這個UI會提供比較多的插件
        <link rel="stylesheet" href="../css/example.css"/> //weui 官方demo提供的css
        <link rel="stylesheet" type="text/css" href="../css/jiaj.css" /> //我們實際場景使用的css
        <script src="../js/libs/storage.js"></script> //我們開發中需要用到的storage方法
        <script src="../js/config.js"></script> //我們開發中需要用到的服務器配置文件
        <script src="../js/interface.js"></script> //我們開發中需要使用到的接口文件
    </head>

body中根據官方文檔，需要給body添加屬性ontouchstart。

多頁操作的demo模板:

<script type="text/html" id="tpl_myDoctor">   //每個模板id對應body中a標簽的id,tpi_是模板id的前綴
           <div class="page">   //每個模板內容都要放在page里
                <!--醫生列表-->
                <div class="weui-cells">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">潘仁和</h4>
                                <p class="weui-media-box__desc">骨科</p>
                                <p class="weui-media-box__desc">上海交通大學醫學院附屬瑞金醫院</p>
                            </div>
                            <div class="weui_jia_cell_ft"></div>
                        </div>
                    </div>
                </div>
                <div class="weui-cells">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">潘仁和</h4>
                                <p class="weui-media-box__desc">骨科</p>
                                <p class="weui-media-box__desc">上海交通大學醫學院附屬瑞金醫院</p>
                            </div>
                            <div class="weui_jia_cell_ft"></div>
                        </div>
                    </div>
                </div>
            </div>
        </script>

我們再看模板頁面對應在body中的a標簽：

<body ontouchstart> //wap上要觸發按鈕的active態，必須觸發ontouchstart事件，可以在body上加上ontouchstart 全局觸發
    <div class="container js_container"> //class 為 js_container,當觸發點擊事件時，實際上是在點擊js_container
          <div class="page"> //這里是定義與響應模板內容的 //以cell為我的醫生為例 <div class="weui-cells">
                    <a href="javascript:;" class="weui-cell weui-cell_access js_cell" data-id="myDoctor"> //當點擊這個a標簽時，觸發ontouchstart的js_container,會把class為js_cell綁定到這個觸發事件上
                        <div class="weui-cell__bd">
                            <p>我的醫生</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
  
          </div>
    </div>
 <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script> 
    <script src="../js/libs/example.js"></script> //官方提供的頁面切換js
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script> //weui js
        <!--tabbar-->
    <script type="text/javascript" src="../js/doctor/tab.js"></script>
</body>

凡跳轉網頁的效果定義與響應，給a標簽添加:

<a class="weui_cell js_cell" href="javascript:;" data-id="button">
    <span class="weui_cell_hd">
      <img src="/images/icon_nav_button.png" class="icon_nav" alt=""></span>
    <div class="weui_cell_bd weui_cell_primary">
        <p>Button</p>
    </div>
    <div class="weui_cell_ft">
    </div>
</a>

class="weui_cell js_cell"
data-id="button"
href="javascript:;"

// page stack
    var stack = []; var $container = $('.js_container'); $container.on('click', '.js_cell[data-id]', function () { var id = $(this).data('id'); go(id); });

頭幾行，定義了一個stack，我們想一下那個推進來的效果，

默認顯示，為棧的第一個元素
如果push進來就，stack里push一個，設置為當前顯示的
如果點擊返回呢，stack里pop出去最后一個，設置上一個為顯示的
如果返回了棧頂，點返回就沒效果了

這里的click事件，它的事件是.js_cell[data-id]

也就是class=js_cell，並且有data-id屬性。

對比一下button的按鈕

<a class="weui_cell js_cell" href="javascript:;" data-id="button">

如此，大概你就該明白了。

那么事件里面是

var id = $(this).data('id'); go(id);

就用button這個例子講，這個id應該是data-id="button"里的button，對吧？

然后go就跳轉了，也就是push的效果應該是它弄的

function go(id){ var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id); $container.append($tpl); stack.push($tpl); // why not use `history.pushState`, https://github.com/weui/weui/issues/26
    //history.pushState({id: id}, '', '#' + id);
    location.hash = '#' + id; $($tpl).on('webkitAnimationEnd', function (){ $(this).removeClass('slideIn'); }).on('animationend', function (){ $(this).removeClass('slideIn'); }); // tooltips
    if (id == 'cell') { $('.js_tooltips').show(); setTimeout(function (){ $('.js_tooltips').hide(); }, 3000); } }

看一下源碼

$container.append($tpl);是dom元素插入
stack.push($tpl); 視圖棧壓入最新的
location.hash = '#' + id;是pushstate更改url地址
其他就是動畫或者根據id干點壞事了

稍微注意一下：我們push的頁面從哪里來的？

 var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id); $container.append($tpl);

我們知道id是data-id="button"里的button，也就是說我們要根據id=“tpl_button”來找模板里的html。

想想我們之前是不是拷貝了一個這樣的模板？

ok，只要是class=js_cell，並且有data-id屬性的就會觸發點擊時間，根據tpl_button里的內容顯示（push）。

這是push，那么返回pop呢？

// location.hash = '#hash1' 和點擊后退都會觸發`hashchange`，這個demo頁面只關心后退
$(window).on('hashchange', function (e) { if (/#.+/gi.test(e.newURL)) { return; } var $top = stack.pop(); if (!$top) { return; } $top.addClass('slideOut').on('animationend', function () { $top.remove(); }).on('webkitAnimationEnd', function () { $top.remove(); }); });

ocation.hash變了

var $top = stack.pop();很明顯出棧了
if (!$top) {return;} 是如果棧頂，不做操作
然后處理$top，然后出棧的視圖移除掉

最外面的視圖移除了，很明顯就是上一個視圖顯示了。

so，原理就是這么簡單.

下面是全部的代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
        <title>患者我的</title>
         <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
         <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
        <link rel="stylesheet" href="../css/example.css"/>
        <link rel="stylesheet" type="text/css" href="../css/jiaj.css" />
        <script src="../js/libs/storage.js"></script>
        <script src="../js/config.js"></script>
        <script src="../js/interface.js"></script>
    </head>
    <body ontouchstart>
        <div class="container js_container">
            <div class="page">
                <!--頭像-->
                <div class="weui-jiaj-panel">
                    <div class="weui-jia-cell-column-center">
                        <img src="../img/doctor/55.jpg" alt="代表頭像" class="weui-jiaj-img" />
                        <h4 class="weui-media-box__title">禮拜五</h4>
                    </div>
                </div>
                <!--幫助多少人-->
                <div class="weui-jiaj-panel">
                    <div class="weui-jia-cell-row">
                        <h4 class="weui-jiaj-media-doctor-title-gray">共問診</h4>
                        <h2 class="weui-media-box__title weui-jiaj-media-doctor-title">1</h2>
                        <h4 class="weui-media-jiaj-title-gray">人</h4>
                    </div>
                </div>
                
                <div class="weui-cells">
                    <a href="javascript:;" class="weui-cell weui-cell_access js_cell" data-id="myDoctor">
                        <div class="weui-cell__bd">
                            <p>我的醫生</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
                
                <div class="weui-cells">
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>我的提問</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>我看過的答案</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
                
                <div class="weui-cells">
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>我的信息</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>修改手機號</p>
                        </div>
                        <div class="weui-cell__ft">
                            13918185896
                        </div>
                    </a>
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>掃一掃</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
                
                <div class="weui-cells">
                    <a href="" class="weui-cell weui-cell_access">
                        <div class="weui-cell__bd">
                            <p>我的錢包</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>
                </div>
                <!--底部菜單-->
                <div class="weui-tabbar" style="height: 45px;position: fixed;">
                    <li class="weui-navbar__item weui-bar__item_on">發現</li>
                    <li class="weui-navbar__item">問醫生</li>
                    <li class="weui-navbar__item">我的</li>
                </div>
            </div>
        </div>
        <!--醫生列表模板-->
        <script type="text/html" id="tpl_myDoctor">
           <div class="page">
                <!--醫生列表-->
                <div class="weui-cells">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">潘仁和</h4>
                                <p class="weui-media-box__desc">骨科</p>
                                <p class="weui-media-box__desc">上海交通大學醫學院附屬瑞金醫院</p>
                            </div>
                            <div class="weui_jia_cell_ft"></div>
                        </div>
                    </div>
                </div>
                <div class="weui-cells">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" src="../img/doctor/55.jpg" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">潘仁和</h4>
                                <p class="weui-media-box__desc">骨科</p>
                                <p class="weui-media-box__desc">上海交通大學醫學院附屬瑞金醫院</p>
                            </div>
                            <div class="weui_jia_cell_ft"></div>
                        </div>
                    </div>
                </div>
            </div>
        </script>
        <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
        <script src="../js/libs/example.js"></script>
        <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
        <!--tabbar-->
        <script type="text/javascript" src="../js/doctor/tab.js"></script>
    </body>
</html>

效果國A <-> B：

官方切換效果js:

/**
 * Created by jfengjiang on 2015/9/11.
 */

$(function () {
    // page stack
    var stack = [];
    var $container = $('.js_container');
    //這里的click事件，它的事件是.js_cell[data-id],也就是class=js_cell，並且有data-id屬性
    $container.on('click', '.js_cell[data-id]', function () {
        //用button這個例子講，這個id應該是data-id="button"里的button
        //然后go就跳轉了，也就是push的效果應該是它弄的
        var id = $(this).data('id');
        go(id);
    });

    //返回頁方法
    //location.hash = '#hash1' 和點擊后退都會觸發`hashchange`，這里操作面的后退操作
    //location.hash變了
    $(window).on('hashchange', function (e) {
        if (/#.+/gi.test(e.newURL)) {
            return;
        }
        //var $top = stack.pop();很明顯出棧了
        var $top = stack.pop();
        //if (!$top) {return;} 是如果棧頂，不做操作
        if (!$top) {
            return;
        }
        //給$top添加或刪除頁面動畫的css
        $top.addClass('slideOut').on('animationend', function () {
            $top.remove();
        }).on('webkitAnimationEnd', function () {
            $top.remove();
        });
    });


    //跳轉頁 方法
    function go(id){
        //push的頁面從哪里來呢？
        //id是data-id="button"里的button，也就是說我們要根據id=“tpl_button”來找模板里的html。
        //只要是class=js_cell，並且有data-id屬性的就會觸發點擊時間，根據tpl_button里的內容顯示（push）
        //這就是push，跳轉到子頁的方法
        var $tpl = $($('#tpl_' + id).html()).addClass('slideIn').addClass(id);
        //$container.append($tpl);是dom元素插入
        $container.append($tpl);
        //stack.push($tpl); 視圖棧中push最新的頁面
        stack.push($tpl);
        //location.hash = '#' + id;是pushstate更改url地址
        location.hash = '#' + id;
        
        //下面是頁面的動畫而添加或刪除的class
        $($tpl).on('webkitAnimationEnd', function (){
            $(this).removeClass('slideIn');
        }).on('animationend', function (){
            $(this).removeClass('slideIn');
        });
        // 消息提醒
        if (id == 'cell') {
            $('.js_tooltips').show();
            setTimeout(function (){
                $('.js_tooltips').hide();
            }, 3000);
        }
    }

    if (/#.*/gi.test(location.href)) {
        go(location.hash.slice(1));
    }

    // toast
    $container.on('click', '#showToast', function () {
        $('#toast').show();
        setTimeout(function () {
            $('#toast').hide();
        }, 5000);
    });
    $container.on('click', '#showLoadingToast', function () {
        $('#loadingToast').show();
        setTimeout(function () {
            $('#loadingToast').hide();
        }, 5000);
    });

    $container.on('click', '#showDialog1', function () {
        $('#dialog1').show();
        $('#dialog1').find('.weui_btn_dialog').on('click', function () {
            $('#dialog1').hide();
        });
    });
    $container.on('click', '#showDialog2', function () {
        $('#dialog2').show();
        $('#dialog2').find('.weui_btn_dialog').on('click', function () {
            $('#dialog2').hide();
        });
    })
});

參考鏈接：

http://i5ting.github.io/weui-practice/#1

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 weui tabbar 切換 js實現網頁tab選項卡切換效果 WEUI Picker不切換數據 vue頁面切換效果（slide效果切換） android頁面切換效果 WPF 頁面切換效果 JS圖片切換效果 iOS開發之蝦米音樂頻道選擇切換效果分析與實現網頁上簡體繁體漢字切換 HTML5實現網頁的全屏切換