主要包括

下拉刷新pullToRefresh

downRefresh.html

主要的代码是$(document.body).pullToRefresh();

    <div class="weui-pull-to-refresh__layer"><div class='weui-pull-to-refresh__arrow'></div><div class='weui-pull-to-refresh__preloader'></div><div class="down">下拉刷新</div><div class="up">释放刷新</div><div class="refresh">正在刷新</div></div></script><script>$(document.body).pullToRefresh(function() {setTimeout(function() {$(document.body).pullToRefreshDone();}, 2000);});</script>

　　详细代码

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><div class="weui-pull-to-refresh__layer"><div class='weui-pull-to-refresh__arrow'></div><div class='weui-pull-to-refresh__preloader'></div><div class="down">下拉刷新</div><div class="up">释放刷新</div><div class="refresh">正在刷新</div></div><h1 class="demos-title">下拉刷新</h1><p>Time: <span id="time">下拉我试试</span></p><p><a href="javascript:;" class="weui-btn weui-btn_primary" id="trigger">通过JS触发下拉刷新</a></p><div id="list" class='demos-content-padded'><p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p>      </div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script>$(document.body).pullToRefresh(function() {setTimeout(function() {$("#time").text(new Date);$(document.body).pullToRefreshDone();}, 2000);$("#list").append("<div class='weui-btn weui-btn_default'>下拉刷新的内容</div>");});$("#trigger").click(function () {$(document.body).pullToRefresh('triggerPullToRefresh');$("#list").append("<div class='weui-btn weui-btn_default'>js触发器新加载的内容</div>");});</script>
</body>
</html>

View Code

滚动刷新infinite（）

主要代码：

    <div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script>var loading = false;$(document.body).infinite().on("infinite", function() {if(loading) return;loading = true;setTimeout(function() {$("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");loading = false;}, 2000);//模拟延迟});</script>

　　详细代码

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><h1 class="demos-title">滚动加载</h1><div id="list" class='demos-content-padded'><p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。</p><p>《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。</p></div><div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script>var loading = false;$(document.body).infinite().on("infinite", function() {if(loading) return;loading = true;setTimeout(function() {$("#list").append("<div class='weui-btn weui-btn_primary'>我是加载的新内容。</div>");loading = false;}, 2000);//模拟延迟
      });</script>
</body>
</html>

View Code

拾取器picker

主要代码：

      $('#Job').picker({title:'请选择您的职业',cols:[{values:['神圣','邪恶']},{values:['法师','战士','辅助','NPC']},{values:['人类','兽类','禽兽']}]});

　　详细代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">选择器</h1></header><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="name" class="weui-label">称呼</label></div><div class="weui-cell__bd"><input class="weui-input" id="name" type="text" value=""></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="date" class="weui-label">手机</label></div><div class="weui-cell__bd"><input class="weui-input" id="mobile" type="text" value=""></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="date" class="weui-label">职业</label></div><div class="weui-cell__bd"><input class="weui-input" id="Job" type="text" value=""></div></div></div><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="inline" class="weui-label">内联显示</label></div><div class="weui-cell__bd"><input class="weui-input" id="inline" type="text" value=""></div></div></div><div id="picker-container"></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script>$('#Job').picker({title:'请选择您的职业',cols:[{values:['神圣','邪恶']},{values:['法师','战士','辅助','NPC']},{values:['人类','兽类','禽兽']}]});$("#mobile").picker({title: "请选择您的手机",cols: [{textAlign: 'center',values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']}],onChange: function(p, v, dv) {console.log(p, v, dv);},onClose: function(p, v, d) {console.log("close");}});$("#name").picker({title: "怎么称呼您？",cols: [{textAlign: 'center',values: ['Mr', 'Ms']},{textAlign: 'center',values: ['Amy', 'Bob', 'Cat', 'Dog', 'Ella', 'Fox', 'Google']}]});$("#inline").picker({container: '#picker-container',cols: [{textAlign: 'center',values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']}],});</script>
</body>
</html>

View Code

普通下拉选择器select

主要代码：

      $("#job").select({title: "选择职业",items: ["法官", "医生", "猎人", "学生", "记者", "其他"],});

　　详细代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">Select</h1></header><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="name" class="weui-label">职业</label></div><div class="weui-cell__bd"><input class="weui-input" id="job" type="text" value="请选择"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="name" class="weui-label">手机</label></div><div class="weui-cell__bd"><input class="weui-input" id="mobile" type="text" value="请选择"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="name" class="weui-label">爱好</label></div><div class="weui-cell__bd"><input class="weui-input" id="in" type="text" value="画画,唱歌,打球"></div></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>$("#job").select({title: "选择职业",items: ["法官", "医生", "猎人", "学生", "记者", "其他"],});$("#mobile").select({title: "选择手机",items: [{title: "iPhone 3GS",value: "001",},{title: "iPhone 5",value: "002",},{title: "iPhone 5S",value: "003",},{title: "iPhone 6",value: "004",},{title: "iPhone 6S",value: "005",},{title: "iPhone 6P",value: "006",},{title: "iPhone 6SP",value: "007",},{title: "iPhone SE",value: "008",},{title: "iPhone 7",value: "009"}]});$("#in").select({title: "您的爱好",multi: true,min: 2,max: 3,items: [{title: "画画",value: 1,description: "额外的数据1"},{title: "打球",value: 2,description: "额外的数据2"},{title: "唱歌",value: 3,description: "额外的数据3"},{title: "游泳",value: 4,description: "额外的数据4"},{title: "健身",value: 5,description: "额外的数据5"},{title: "不能选睡觉",value: 6,description: "额外的数据6"},],beforeClose: function(values, titles) {console.log(values);//1,2,3console.log(titles);//画画,打球,唱歌if(values.indexOf("6") !== -1) {$.toast("不能选睡觉", "cancel");return false;}return true;},onChange: function(d) {console.log(d);},onClose: function (d) {console.log('close')}});</script>
</body>
</html>

View Code

城市选择器cityPicker

需要引入一个特殊的js

主要代码，就是用cityPicker方法：

$("#end").cityPicker({title: "选择目的地"});

　　详细代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">City Picker</h1></header><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="name" class="weui-label">发出地</label></div><div class="weui-cell__bd"><input class="weui-input" id="start" type="text" value="湖北省 武汉市 武昌区"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="date" class="weui-label">目的地</label></div><div class="weui-cell__bd"><input class="weui-input" id="end" type="text" value=""></div></div></div><h2 class="demos-second-title">只选择城市</h2><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="home-city" class="weui-label">城市</label></div><div class="weui-cell__bd"><input class="weui-input" id="home-city" type="text"></div></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 src="js/city-picker.js" type="text/javascript" charset="utf-8"></script><script>$("#start").cityPicker({title: "选择出发地",onChange: function (picker, values, displayValues) {console.log(values, displayValues);}});$("#end").cityPicker({title: "选择目的地"});$("#home-city").cityPicker({title: "选择目的地",showDistrict: false,onChange: function (picker, values, displayValues) {console.log(values, displayValues);}});</script>
</body>
</html>

View Code

cityPicker的底层实现是基于picker的

使用$.fn.functionName=function(){} 来定义自定义js函数

$.fn.cityPicker=function(param){

　　return this.each(function(){

　　　　$(this).picker(p);

　　});

}

时间选择器datetimePicker

详细代码

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">时间选择</h1><div class="demos-sub-title">基于picker</div></header><!--微信团队2个空格的缩进，真的让人恼火--><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="time" class="weui-label">默认配置</label></div><div class="weui-cell__bd"><input class="weui-input" id="time" type="text" value=""></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="time-format" class="weui-label">限制年月</label></div><div class="weui-cell__bd"><input class="weui-input" id="years-monthes" type="text" value="2017-06-20 12:00"></div></div></div><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="time-inline" class="weui-label">内联显示</label></div><div class="weui-cell__bd"><input class="weui-input" id="time-inline" type="text" value=""></div></div></div><div id="time-container"></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#time").datetimePicker();$("#years-monthes").datetimePicker({title: '限定年月',years: [2017, 2018],monthes: ['06', '07'],onChange: function (picker, values, displayValues) {console.log(values);}});$("#time-inline").datetimePicker({container: '#time-container'})</script>
</body>
</html>

View Code

日历控件calendar

主要代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">日历</h1></header><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__hd"><label for="date" class="weui-label">日期</label></div><div class="weui-cell__bd"><input class="weui-input" id="date" type="text"></div></div><div class="weui-cell"><div class="weui-cell__hd"><label for="date-multiple" class="weui-label">多选</label></div><div class="weui-cell__bd"><input class="weui-input" id="date-multiple" type="text" value=""></div></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 type="text/javascript">$("#date").calendar();$("#date-multiple").calendar({multiple:true});</script>
</body>
</html>

View Code

模拟顶部的消息提醒noti

主要代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">Notification</h1></header><div class='demos-content-padded'><a href="javascript:;" id='show-notification' class="weui-btn weui-btn_primary">显示通知</a></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#show-notification").on("click",function () {$.noti({title: "中奖啦！",text: "点击领取腾讯王者荣耀杯二等奖！",media: "<img src='img/present.png' />",data: {message: "逗你玩的!"},time: 3000,onClick: function(data) {$.alert(data.message);}});});</script>
</body>
</html>

View Code

底部弹框层

其实就是通过样式和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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">底部弹框层</h1></header><div class='demos-content-padded'><a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#full">显示全屏(默认)Popup</a><a href="javascript:;" class="weui-btn weui-btn_primary open-popup" data-target="#half">显示底部的Popup</a></div><div id="full" class='weui-popup__container'><div class="weui-popup__overlay"></div><div class="weui-popup__modal"><header class='demos-header'><h2 class="demos-second-title">关于 jQuery WeUI</h2><p class="demos-sub-title">By 言川 @2016/03/30</p></header><article class="weui-article"><h1>大标题</h1><section><h2 class="title">章标题</h2><section><h3>1.1 节标题</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</p><p><!--<img src="./images/pic_article.png" alt=""><img src="./images/pic_article.png" alt="">--></p></section><section><h3>1.2 节标题</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section></section></article><a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a></div></div><div id="half" class='weui-popup__container popup-bottom'><div class="weui-popup__overlay"><!--<img src="img/avatar.jpg" />--></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-grids"><a href="javascript:$.alert('发布《王者荣耀》');" class="weui-grid js_grid" data-id="dialog"><div class="weui-grid__icon"><img src="img/icon_nav_dialog.png" alt=""></div><p class="weui-grid__label">发布</p></a><a href="javascript:$.alert('编辑《斗破苍穹》');" class="weui-grid js_grid" data-id="progress"><div class="weui-grid__icon"><img src="img/icon_nav_progress.png" alt=""></div><p class="weui-grid__label">编辑</p></a><a href="javascript:$.confirm('保存吗');" class="weui-grid js_grid" data-id="msg"><div class="weui-grid__icon"><img src="img/icon_nav_msg.png" alt=""></div><p class="weui-grid__label">保存</p></a><a href="javascript:;" class="weui-grid js_grid" data-id="dialog"><div class="weui-grid__icon"><img src="img/icon_nav_dialog.png" alt=""></div><p class="weui-grid__label">发布</p></a><a href="javascript:;" class="weui-grid js_grid" data-id="progress"><div class="weui-grid__icon"><img src="img/icon_nav_progress.png" alt=""></div><p class="weui-grid__label">编辑</p></a><a href="javascript:;" class="weui-grid js_grid" data-id="msg"><div class="weui-grid__icon"><img src="img/icon_nav_msg.png" alt=""></div><p class="weui-grid__label">保存</p></a></div></div></div></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script></body>
</html>

View Code

图片滚动swiper

需要引入一个特殊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>.swiper-container {width: 100%;} .swiper-container img {display: block;width: 100%;}</style>
</head>
<body ontouchstart><!-- Your Code --><div class="swiper-container"><!-- Additional required wrapper --><div class="swiper-wrapper"><!-- Slides --><div class="swiper-slide"><img src="img/swiper-1.jpg" /></div><div class="swiper-slide"><img src="img/avatar.jpg" /></div><div class="swiper-slide"><img src="img/swiper-3.jpg" /></div></div><!-- If we need pagination --><div class="swiper-pagination"></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 src="js/swiper.js" type="text/javascript" charset="utf-8"></script><script>$(".swiper-container").swiper({loop: true,autoplay: 3000});</script>
</body>
</html>

　　

图片浏览器（基于swiper）

photoBrowser基于swiper组件

主要代码：

<!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"/>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">图片浏览器</h1></header><div class='demos-content-padded'><a href="javascript:;" class="weui-btn weui-btn_primary" id="pb1">只有图片</a><a href="javascript:;" class="weui-btn weui-btn_primary" id="pb2">带说明文案</a></div><script src="js/jquery-2.1.4.js"></script><script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script><script src="js/swiper.js" type="text/javascript" charset="utf-8"></script><script>var pb1 = $.photoBrowser({items: ["img/swiper-1.jpg","img/swiper-2.jpg","img/swiper-3.jpg","img/swiper-4.jpg"],onSlideChange: function(index) {console.log(this, index);},onOpen: function() {console.log("onOpen", this);},onClose: function() {console.log("onClose", this);}});$("#pb1").click(function() {pb1.open(2);});var pb2 = $.photoBrowser({items: [{image: "img/swiper-1.jpg",caption: "尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。"},{image: "img/swiper-2.jpg",caption: "组件（Component）是 Vue.js 最强大的功能之一。"},{image: "img/swiper-3.jpg",caption: "组件可以扩展 HTML 元素，封装可重用的代码"},{image: "img/swiper-4.jpg",caption: "在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。"}],initIndex: 2});$("#pb2").click(function() {pb2.open();});</script>
</body>
</html>

View Code

购物车的计数器

基本上就是样式+js实现，增减的逻辑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 type="text/css">.img-title{width: 20px;display: block;}</style>
</head>
<body ontouchstart><!-- Your Code --><header class='demos-header'><h1 class="demos-title">Count/计数器</h1></header><div class="bd"><div class="page__bd"><div class="weui-cells__title">带计数器的列表项</div><div class="weui-cells"><div class="weui-cell"><div class="weui-cell__bd"><p>优衣库轻薄羽绒服</p></div><div class="weui-cell__ft"><div class="weui-count"><a class="weui-count__btn weui-count__decrease"></a><input class="weui-count__number" type="number" value="1" /><a class="weui-count__btn weui-count__increase"></a></div></div></div><div class="weui-cell"><div class="weui-cell__hd"><img src="img/avatar.jpg" class="img-title"/>                </div><div class="weui-cell__bd"><p>三叶草男士运动鞋</p></div><div class="weui-cell__ft"><div class="weui-count"><a class="weui-count__btn weui-count__decrease"></a><input class="weui-count__number" type="number" value="2" /><a class="weui-count__btn weui-count__increase"></a></div></div></div><div class="weui-cell weui-cell_swiped"><div class="weui-cell__bd"><div class="weui-cell"><div class="weui-cell__bd"><p>可滑动删除</p></div><div class="weui-cell__ft"><div class="weui-count"><a class="weui-count__btn weui-count__decrease"></a><input class="weui-count__number" type="number" value="1" /><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><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 = 99, MIN = 1;$('.weui-count__decrease').click(function (e) {var $input = $(e.currentTarget).parent().find('.weui-count__number');console.log($input.val());var number = parseInt($input.val() || "0") - 1if (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() || "0") + 1if (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>

View Code

转载于:https://www.cnblogs.com/1906859953Lucas/p/9566722.html

微信WeUI扩展组件相关推荐

  1. 微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.6 scroll-view组件，在小程序中如何实现滚动锚定，如何渲染一个滚动的长列表？

    scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能 左右或上下滚动 下拉更新 1.1 与滚动有关的属性: scroll-x ...

  2. 如何把msg.html导入微信,weui Msg提示页

    本章节我们来介绍微信weui反馈组件中的Msg 提示页,Msg提示页组件效果使用了jquery,所以案例依赖于jquery库大家注意.按照下面的步骤就可以做出网页效果,案例中引用的微信weui的css ...

  3. 微信小程序，引入WeUI组件库 扩展组件库

    小程序扩展组件库 | 微信开放文档 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建 ...

  4. 微信小程序，引用扩展组件提示“没有找到可以构建的NPM包”

    在微信小程序开发中,需要引入扩展组件的时候,使用npm引入之后,却提示"没有找到可以构建的NPM包",查了很多资料,原来是需要参与构建的npm在miniprogramroot目录. ...

  5. 微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.5 可移动容器及可移动区域，以及如何实现侧滑删除功能

    一.学习使用moveable-view与movable-area组件 1.1 关于元素的定位 static 静态定位 元素在页面流动的当前位置定位,这个时候它的top.left.right.botto ...

  6. 直接上手！不容错过的Visual Studio Code十大扩展组件

    作者 | David Neal 译者 | 谭开朗,责编 | 屠敏 转载自CSDN(ID:CSDNnews) 各大平台与各种语言的开发人员都在使用Visual Studio Code,我对此感到惊讶.S ...

  7. 微信 weui 初体验

    最近微信推出他们自己的H5组件(weui)组件的优点有两个: 做为开发者的我们可以不用写太多css,直接拿过来就可以用. 组件都有点击态,大大增加了用户的体验好感 高清屏幕下 border : 0.5 ...

  8. php处理微信weui图片上传

    php处理微信weui图片上传 微信weui上传组件 Jquery代码 php处理数据(Thinkphp5) 前端通过weui完成上传图片.预览图片的操作(具体可以看weui案例),然后weui请求数 ...

  9. html怎样使用ui套件,weui框架组件小白入门指南：如何安装使用weui.js?

    本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规.大家都是程序员,不要闹得不开心. 苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法.这款框架已经问世有几年的时间了,因为其可以把微信 ...

最新文章

  1. 守护进程和inetd(转)
  2. MySQL—函数的使用
  3. 社会保险省内转移需要什么手续或过程?
  4. LeetCode 1871. 跳跃游戏 VII（贪心）
  5. LeetCode 621. 任务调度器（贪心）
  6. windows c++ 内存映射大文件问题记录
  7. 已达成计算机的连接数最大值无法再,已达到计算机的连接数最大值,无法再同此远程计算机连接...
  8. HTML5新控件 - 日期和时间选择输入
  9. mysql php apache源码_用源码包安装php+mysql+apache+vbb总结
  10. python闯红灯检测斑马线检测红绿灯检测车速检测车流量统计车牌识别智慧交通系统
  11. windows抓包工具——Fiddler配置及使用、手机抓包（iPhone、安卓）
  12. 中小银行传统数据仓库向大数据平台迁移探索
  13. [Unity算法]斜抛运动
  14. 某宁detect、feature参数分析
  15. [node]request+watch开发自测的懒人神器
  16. hp388服务器安装linux,hpe dl388 g10服务器安装centos7.6
  17. 【青少年编程】【三级】接苹果
  18. BMI指数（Body Mass Index身体质量指数），简称体质指数又称体重指数，BMI值是根据你的身高、体重按照一定的公式得出数值，是一个衡量你身体健康的参数。
  19. Python按单元格读取复杂电子表格（Excel）数据实践
  20. 采用ASP.NET使用C#.NET语言开发的在线学生选课系统（源码+数据库+论文）

热门文章

  1. 椭圆曲线密码学(ECC)简介
  2. 前面的可以显示位置国旗，后面的可显示地区和线路
  3. 2019spring exam 7-5 校庆
  4. mysql强行结束程_如何强制结束进程?
  5. 数据库 多表 查询练习题
  6. 南京计算机与软件学院,南京信息工程大学 计算机与软件学院 刘　琦
  7. dns配置异常怎么修复_DNS配置错误，电脑管家又修复不了，怎么办。
  8. React开发简书总结
  9. 基于MATLAB的数字信号处理(4) IIR数字滤波器设计及软件实现
  10. EasyRecovery五个步骤搞定数据恢复