微信WeUI常见页面模板
购物车模板
就是popup弹层(css样式+js)，还有slider滑动操作，还有增减的js
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
<style>
.summary {
padding: 8px;
text-align: right;
background-color: white;
}
.price {
font-size: .9em;
margin-right: 6px;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code --> <header class='demos-header'>
<h1 class="demos-title">购物车</h1>
</header> <div class='demos-content-padded'>
<article class="weui-article">
<p>这是一个购物车的模板，可以参考这个模板完成你自己的购物车。支持：</p>
<ul>
<li>可以加减数量</li>
<li>可以滑动删除</li>
</ul>
<a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#cart">打开购物车</a>
</article>
</div> <div id="cart" class='weui-popup__container popup-bottom'>
<div class="weui-popup__overlay"></div>
<div class="weui-popup__modal">
<div class="toolbar">
<div class="toolbar-inner">
<a href="javascript:;" class="picker-button close-popup">关闭</a>
<h1 class="title">我的购物车</h1>
</div>
</div>
<div class="modal-content">
<div class="weui-cells">
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>清风纸巾12包装</p>
</div>
<div class="weui-cell__ft">
<span class="price">￥24.00</span>
<div class="weui-count">
<a class="weui-count__btn weui-count__decrease"></a>
<input class="weui-count__number" type="number" value="" />
<a class="weui-count__btn weui-count__increase"></a>
</div>
</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
</div>
</div>
<div class="weui-cell weui-cell_swiped">
<div class="weui-cell__bd">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:5px;display:block"></div>
<div class="weui-cell__bd">
<p>七匹狼男士长筒袜</p>
</div>
<div class="weui-cell__ft">
<span class="price">￥35.00</span>
<div class="weui-count">
<a class="weui-count__btn weui-count__decrease"></a>
<input class="weui-count__number" type="number" value="" />
<a class="weui-count__btn weui-count__increase"></a>
</div>
</div>
</div>
</div>
<div class="weui-cell__ft">
<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:">删除</a>
<a class="weui-swiped-btn weui-swiped-btn_default close-swipeout" href="javascript:">关闭</a>
</div>
</div>
</div>
</div>
<p class="summary">
件商品, 共计 <strong>123.5</strong> 元
</p>
</div>
</div> <script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
add_delete();
slider_operate(); //封装成方法，便于调用
function add_delete () {
var MAX = , MIN = ;
$('.weui-count__decrease').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
console.log($input.val());
var number = parseInt($input.val() || "") -
if (number < MIN) number = MIN;
$input.val(number)
});
$('.weui-count__increase').click(function (e) {
var $input = $(e.currentTarget).parent().find('.weui-count__number');
var number = parseInt($input.val() || "") +
if (number > MAX) number = MAX;
$input.val(number)
});
} //封装成方法，便于调用
function slider_operate () {
$('.delete-swipeout').click(function () {
$(this).parents('.weui-cell').remove()
});
$('.close-swipeout').click(function () {
$(this).parents('.weui-cell').swipeout('close')
});
} </script>
</body>
</html>
tpl就是template的简写
聊天室模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
<style type="text/css">
.badge-position{
position: absolute;
top: -.4em;
right: -.4em;
}
</style>
</head>
<body ontouchstart>
<!-- Your Code -->
<div class="page__pd">
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" action="#">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__bd">
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-cell__bd">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
<span class="weui-badge badge-position" ></span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div> </a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
<span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;"></span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
<span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">+</span>
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
刘亦菲
<span class="weui-media-box__title-after">下午8:</span>
</h4>
<p class="weui-media-box__desc">小李明天早上帮我带两个包子，一个猪肉粉丝和一个奶黄包</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
Baby
<span class="weui-media-box__title-after">下午7:</span>
</h4>
<p class="weui-media-box__desc">晚上约吗？</p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="img/avatar3.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
江户川-元芳
<span class="weui-media-box__title-after">上午10:</span>
</h4>
<p class="weui-media-box__desc">真相只有一个</p>
</div>
</a>
</div>
</div>
</div>
<style>
.weui-panel {
margin: ;
}
.weui-media-box {
padding: 8px 15px;
}
.weui-panel__bd .weui-media-box__hd {
width: 50px;
height: 50px;
line-height: 50px;
position: relative;
}
.weui-media-box__desc {
-webkit-line-clamp: ;
}
.weui-media-box__title {
margin-top: -4px;
}
</style>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script> </body>
</html>
微信WeUI常见页面模板的更多相关文章
- 微信WeUI入门2
引入需要的样式文件 最重要的css文件为 weui.min.css 基本的框架如下: <!DOCTYPE html> <html lang="zh-CN"> ...
- 微信 + weui 框架记录
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一: 包含button.cell.dialog. progress. to ...
- 微信jssdk常见错误及解决方法
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息.以下为常见错误及解决方法: invalid url domain当前页面所在域名与使用 ...
- 微信 weui 初体验
最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...
- 微信WeUI扩展组件
主要包括 下拉刷新pullToRefresh downRefresh.html 主要的代码是$(document.body).pullToRefresh(); <div class=" ...
- 微信WeUI基础
首先引入样式css和js 虽然基础的其实还有weui.min.css,但是为了一些动态效果,也要引入其他的东西. 基本框架 <!DOCTYPE html> <html lang=&q ...
- 微信WeUI入门
为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI. 该样式库目前包含 button (按钮).cell (单元格).toast (浮层提示) ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 移动端 常见布局CSS3的细节
结合 Framework7 和ios UI系统,微信weUI,支付宝H5 我们在移动端一些css用法 细节的有了更深的了解: 高斯模糊的显示效果,ios8以上支持,ios8以上0.5px,bac ...
随机推荐
- Polynomial （ Arithmetic and Algebra） CGAL 4.13 -User Manual
1 Fundamentals A polynomial is either zero, or can be written as the sum of one or more non-zero ter ...
- sqlserver排名函数
在做开发的时候,排名函数是sqlserver经常用到的函数,在分页的时候需要用,分组的时候也要用,主要排名函数有row-number,rank(),dense-rank(),NTILE()接下来详细说 ...
- “全栈2019”Java第一百零二章：哪些作用域可以声明局部内部类？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- “全栈2019”Java第九十章：内部类可以向上或向下转型吗？
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- nosql基本了解
数据库分为关系型数据库和非关系型数据库nosql,关系型数据库比较常见,此处不再多讲:nosql有key-value存储数据库,比如redis:文档型数据库,比如mongodb:列存储数据库,比如hb ...
- [Swift实际操作]八、实用进阶-(3)闭包在定时任务、动画和线程中的使用实际操作
闭包的使用相当广泛,它是可以在代码中被传递和引用的具有独立功能的模块.双击打开之前创建的空白项目.本文将演示闭包在定时任务.动画和线程中的使用.在左侧的项目导航区,打开视图控制器的代码文件:ViewC ...
- yum 安装和卸载
yum list列出资源库中特定的可以Linux Yum安装或更新以及已经安装的rpm包 安装 yum install 安装包关键字 卸载 yum remove 安装包名
- mxonline实战4，用户登陆页面2和用户注册1
一. 基于类来定义view.py diango中使用基于类来定义views的功能,其实更加方便,因为这样可继承一些定义好的基类,来减少我们的代码量 1. 使用基于类的方法,来重新定 ...
- 浅谈HashMap原理，记录entrySet中的一些疑问
HashMap的底层的一些变量: transient Node<K,V>[] table; //存储数据的Node数组 transient Set<java.util.Map.Ent ...
- JavaBean简介及使用
JavaBean简介及使用 望星空 https://blog.csdn.net/joywy/article/details/7773503 一.JavaBean简介 JavaBean是使用Jav ...