weui 多网页切换效果分析

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

weui 多网页切换效果分析的更多相关文章

iOS开发之虾米音乐频道选择切换效果分析与实现
今天博客的内容比较简单,就是看一下虾米音乐首页中频道选择的一个动画效果的实现.之前用mask写过另外一种Tab切换的一种效果,网易云音乐里边的一种Tab切换效果,详情请移步于"视错觉:从一个 ...
css图片切换效果分析+翻译整理
Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/1 ...
纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果百度搜索 js 点击菜单项就可以切换内容的效果
精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
巧用ViewPager 打造不一样的广告轮播切换效果
一.概述如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item ...
网页3D效果库Three.js初窥
网页3D效果库Three.js初窥背景一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
手机端的tab切换，响应式切换效果
之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > < ...
jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

随机推荐

浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考
首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...
php静态缓存简单制作
制作缓存的目的是为了让我们的页面运行更加快速,减少读取数据库内容的次数,给用户更好的体验,为此我们可以使自己的程序做一下缓存,并且设置一个缓存过期的时间,来保证与数据库的一致,当然并不是所有的程序都适 ...
php注释规范
注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...
12款简化 Web 开发的 JavaScript 开发框架
前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...
微信小程序之基础简介
创建小程序项目后进入编辑环境中会有以下的初始配置文件: 文件夹: 1.pages(存放小程序的页面) 1.index 2.logs (页面里的js文件以Page()方法开头所有参数对象都存放在其里 ...
业务人员自助BI分析不够用，还要自助数据准备？
自助式BI工具,可以帮助业务人员充分了解和利用企业数据,通过可视化操作,拖拖拽拽来新建分析,生成可视化的报表,帮助企业决策.但近几年的调查研究发现,拥有强大分析策略和模型的产品,比如Tableau.q ...
[转]ASP.NET应用程序生命周期趣谈(四) HttpHandler和页面生命周期
在之前的三篇文章中,我们还算简明扼要的学习了asp.net的整个生命周期,我们知道了一个Request进来以后先去ISAPI Filter,发现是asp.net程序后又ASPNET_ISAPI.dll ...
iOS 自定义方法 - UIView扩展
示例代码 //#import <UIKit/UIKit.h>@interface UIView (LPCView)/** 上 */@property CGFloat top;/** 下 * ...
【代码笔记】iOS-实现网络图片的异步加载和缓存
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...
[Erlang 0123] Erlang EPMD
epmd进程和Erlang节点进程如影随形,在Rabbitmq集群,Ejabberd集群,Couchbase集群产品文档中都会有相当多的内容讲epmd,epmd是什么呢? epmd 是Erlan ...

weui 多网页切换效果分析

weui 多网页切换效果分析的更多相关文章

随机推荐

热门专题