weui学习总结——3、微信样式界面切换

来源：互联网发布：网络点击率最高电视编辑：程序博客网时间：2024/05/22 16:15

前言：weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档，所以这篇博客就当是方便以后开发而使用吧。
weui资源下载（也可以从官网下载）：
http://download.csdn.net/download/zhengyikuangge/9940737

手机移动web开发必须要做的两点：1、body中加上ontouchstart，即<body ontouchstart>...</body>；2、页面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
需要事先导入的资源：weui.css、example.css、zepto.min.js和example.js，这四个资源在上述weui资源中包含，可自行下载查找。另外在我的资源中也有下载地址，weui.css下载地址：http://download.csdn.net/download/zhengyikuangge/9956240；后面三个资源的下载地址：http://download.csdn.net/download/zhengyikuangge/9956337

微信样式的界面切换

效果图：
这里写图片描述

全部代码如下：

<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>页面切换</title><!-- 导入所需资源，注意资源的路径 --><link rel="stylesheet" href="weui.css" /><link rel="stylesheet" href="example.css"/><script src="zepto.min.js"></script><script src="example.js"></script><script type="text/javascript"><!-- 这段js代码具体操作界面切换的功能 -->    $(function(){        var winH = $(window).height();        var categorySpace = 10;        $('.js_item').on('click', function(){            var id = $(this).data('id');            window.pageManager.go(id);        });        $('.js_category').on('click', function(){            var $this = $(this),                $inner = $this.next('.js_categoryInner'),                $page = $this.parents('.page'),                $parent = $(this).parent('li');            var innerH = $inner.data('height');            bear = $page;            if(!innerH){                $inner.css('height', 'auto');                innerH = $inner.height();                $inner.removeAttr('style');                $inner.data('height', innerH);            }            if($parent.hasClass('js_show')){                $parent.removeClass('js_show');            }else{                $parent.siblings().removeClass('js_show');                $parent.addClass('js_show');                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;                    if(scrollTop > this.offsetTop){                        scrollTop = this.offsetTop - categorySpace;                    }                    $page.scrollTop(scrollTop);                }            }        });    });</script><!-- js中创建div界面，也就是成功提示界面，注意js的id --><script type="text/html" id="tpl_msg_success"><div class="page">    <div class="weui-msg">        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>        <div class="weui-msg__text-area">            <h2 class="weui-msg__title">操作成功</h2>            <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>        </div>        <div class="weui-msg__opr-area">            <p class="weui-btn-area">                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>            </p>        </div>        <div class="weui-msg__extra-area">            <div class="weui-footer">                <p class="weui-footer__links">                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>                </p>                <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>            </div>        </div>    </div></div></script><!-- js中创建div界面，也就是警告提示界面，注意js的id --><script type="text/html" id="tpl_msg_warn"><div class="page">    <div class="weui-msg">        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>        <div class="weui-msg__text-area">            <h2 class="weui-msg__title">操作失败</h2>            <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>        </div>        <div class="weui-msg__opr-area">            <p class="weui-btn-area">                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>                <a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>            </p>        </div>        <div class="weui-msg__extra-area">            <div class="weui-footer">                <p class="weui-footer__links">                    <a href="javascript:void(0);" class="weui-footer__link">底部链接文本</a>                </p>                <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>            </div>        </div>    </div></div></script></head><body ontouchstart>    <!-- 这段代码必须有，类似于界面切换的容器 -->    <div class="container" id="container"></div><!-- js中创建div界面，也就是主界面，注意js的id --><script type="text/html" id="tpl_home">    <div class="page">    <div class="page__hd">        <h1 class="page__title">Msg</h1>        <p class="page__desc">提示页</p>    </div>    <div class="page__bd page__bd_spacing">        <!-- 这里要注意a的链接msg_success与成功提示界面的id相符 -->        <a href="#msg_success" class="weui-btn weui-btn_default">成功提示页</a>        <!-- 这里要注意a的链接msg_warn与警告提示界面的id相符 -->        <a href="#msg_warn" class="weui-btn weui-btn_default">失败提示页</a>    </div>    </div></script>  </body></html>

当我看到这段代码的时候特别纠结，也是第一次看到这样写的代码

关于weui暂时只写这三篇博客，因为目前其他的还没有用到，有兴趣的同仁可以留言讨论~

阅读全文

0 0