微信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 ...
随机推荐
- django def validate_column和validate
VIewDemo class RegUserSet(mixins.CreateModelMixin,viewsets.GenericViewSet): serializer_class = RegUs ...
- sgi stl内存池实现------源码加翻译
class __default_alloc_template { enum { unit = 8 };//分配单位 后面直接用8代替 enum { max_bytes = 128 };//最大分配字节 ...
- Docker 修改镜像源地址
Docker 官方中国区 https://registry.docker-cn.com 网易 http://hub-mirror.c.163.com ustc https://docker.mirro ...
- 数据库访问接口(ODBC、OLE DB、ADO)
最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...
- 【ocp-12c】最新Oracle OCP-071考试题库（47题）
47.(10-6)choose two You need to calculate the number of days from 1st January 2007 till date. Dates ...
- 如何外部访问你的本地网站natapp
用natapp,要实名制才可以获得免得authtoken 1.注册登录: https://natapp.cn/tunnel/lists 2.这个要填写一下,端口我写的是3000 3.客户端下载 解压: ...
- “全栈2019”Java异常第九章：throws关键字详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- 网站架构：PHP针对并发访问如何优化？
1.拆表:大表拆小表(垂直拆,水平拆:分表,分区partition,分片sharding),可以在应用层实现,也可以在数据库层面实现一部分:提高系统性能. 2.分库:把表放到不同的数据库,这也是分布式 ...
- mxonline实战10，课程列表页，课程详情页1
对应github地址:第10天 一. 课程列表页 1. 拷贝course-list.html到templates目录中 2. 编写url和view 在courses/views.py中新加
- psp0级报告
计划 1.1需求描述: 现在市场上有很多的面向小学生的题卡,但是这习题卡不但价格昂贵,而且每次做题的内容基本都是固定.针对这些问题,开发出了这款网页在线答题系统,每次的题目都有所不同,可以跟快更好提高 ...