编译为mui v2.0.0

dist/css/mui.css

 /*!
  * =====================================================
- * Mui v1.9.0 (https://github.com/dcloudio/mui)
+ * Mui v2.0.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 

examples/hello-mui/css/feedback-page.css

+.feedback body {
+	background-color: #EFEFF4;
+}
+.feedback input,
+.feedback textarea {
+	border: none !important;
+}
+.feedback textarea {
+	height: 100px;
+	margin-bottom: 0 !important;
+	padding-bottom: 0 !important;
+}
+.feedback .row {
+	width: 100%;
+	background-color: #fff;
+}
+.feedback p {
+	padding: 10px 15px 0;
+}
+.feedback button { 
+	width: 90%;
+	height: 46px;
+	left: 50%;
+	-webkit-transform: translate(-50%);
+}
+.feedback .hidden {
+	display: none;
+}
+.feedback .image-list {
+	width: 100%;
+	height: 85px;
+	background-size: cover;
+	padding: 10px 10px;
+	overflow: hidden;
+}
+.feedback .image-item {
+	width: 65px;
+	height: 65px;
+	background-image: url(../images/iconfont-tianjia.png);
+	background-size: 100% 100%;
+	display: inline-block;
+	position: relative;
+	border-radius: 5px;
+	margin-right: 10px;
+	margin-bottom: 10px;
+	border: solid 1px #e8e8e8;
+}
+.feedback .image-item input[type="file"] {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	cursor: pointer;
+	z-index: 0;
+}
+.feedback .image-item.space {
+	border: none;
+}
+.feedback .image-item .image-close {
+	position: absolute;
+	display: inline-block;
+	right: -6px;
+	top: -6px;
+	width: 20px;
+	height: 20px;
+	text-align: center;
+	line-height: 20px;
+	border-radius: 12px;
+	background-color: #FF5053;
+	color: #f3f3f3;
+	border: solid 1px #FF5053;
+	font-size: 9px;
+	font-weight: 200;
+	z-index: 1;
+}
+.feedback .image-item.space .image-close {
+	display: none;
+}
\ No newline at end of file

examples/hello-mui/css/mui.css

 /*!
  * =====================================================
- * Mui v1.9.0 (https://github.com/dcloudio/mui)
+ * Mui v2.0.0 (https://github.com/dcloudio/mui)
  * =====================================================
  */
 

examples/hello-mui/css/mui.dtpicker.css

@@ -13,6 +13,11 @@
 .mui-dtpicker.mui-active {
 	-webkit-transform: translateY(0px);
 }
+/*用于将 html body 禁止滚动条*/
+
+.mui-dtpicker-active-for-page {
+	overflow: hidden !important;
+}
 .mui-android-5-1 .mui-dtpicker {
 	bottom: -300px;
 	-webkit-transition-property: bottom;
@@ -42,6 +47,12 @@
 	border-top: solid 1px #eee;
 	background-color: #fff;
 }
+.mui-ios .mui-dtpicker-body {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
 .mui-dtpicker-title h5 {
 	display: inline-block;
 	width: 20%;
@@ -58,9 +69,6 @@
 	float: left;
 	border: none;
 }
-.mui-dtpicker .mui-listpicker ul li {
-	padding: 10px;
-}
 /*年月日时分*/
 
 [data-type="datetime"] .mui-listpicker,

examples/hello-mui/css/mui.listpicker.css

@@ -10,7 +10,7 @@
 	border: solid 1px #ccc;
 	padding: 0px;
 	margin: 3px;
-	height: 200px;
+	height: 185px;
 	background-color: #fff;
 	overflow: hidden;
 	border-radius: 3px;
@@ -18,18 +18,22 @@
 .mui-listpicker .mui-listpicker-inner {
 	width: 100%;
 	height: 100%;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
 	position: absolute;
 	left: 0px;
 	top: 0px;
 	z-index: 1;
 	border-radius: 3px;
+	-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
+	-webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
 }
-.mui-listpicker .mui-listpicker-inner-ios {
+.mui-ios .mui-listpicker .mui-listpicker-inner {
 	width: calc(100% + 8px);
 	padding-right: 8px;
 }
+.mui-android .mui-listpicker .mui-listpicker-inner {
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
 .mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
 	width: 0px;
 	height: 0px;
@@ -42,14 +46,32 @@
 	position: relative;
 }
 .mui-listpicker ul li {
+	box-sizing: border-box;
 	position: relative;
-	padding: 8px;
+	height: 36px;
+	line-height: 36px;
 	text-align: center;
 	color: #555;
-	white-space:nowrap; 
+	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.mui-listpicker.three-dimensional {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional .mui-listpicker-inner {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional ul {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+.mui-listpicker.three-dimensional ul li {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
 .mui-listpicker ul li:last-child {
 	border-bottom: none;
 }
@@ -68,6 +90,6 @@
 	top: 50%;
 	z-index: 0;
 }
-.mui-listpicker .mui-listpicker-highlight {
+.mui-listpicker .mui-listpicker-item-selected {
 	color: green;
 }
\ No newline at end of file

examples/hello-mui/css/mui.poppicker.css

@@ -13,6 +13,11 @@
 .mui-poppicker.mui-active {
 	-webkit-transform: translateY(0px);
 }
+/*用于将 html body 禁止滚动条*/
+
+.mui-poppicker-active-for-page {
+	overflow: hidden !important;
+}
 .mui-android-5-1 .mui-poppicker {
 	bottom: -300px;
 	-webkit-transition-property: bottom;
@@ -51,6 +56,12 @@
 	height: 200px;
 	border-top: solid 1px #ddd;
 }
+.mui-ios .mui-poppicker-body {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
 .mui-poppicker-body .mui-listpicker {
 	width: 100%;
 	height: 100%;

examples/hello-mui/examples/feedback.html

+<!doctype html>
+<html lang="en" class="feedback">
+
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<title>feedback</title>
+		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
+	</head>
+
+	<body>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">意见反馈</h1>
+		</header>
+		<div class="mui-content">
+			<p>问题和意见</p>
+			<div class="row mui-input-row">
+				<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
+			</div>
+			<p>图片(选填,提供问题截图)</p>
+			<div id='image-list' class="row image-list">
+			</div>
+			<p>QQ/邮箱</p>
+			<div class="mui-input-row">
+				<input id='contact' type="text" class="mui-input-clear  contact" placeholder="(选填,方便我们联系你 )" />
+			</div>
+			<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
+		</div>
+		<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客户面板” 能够查阅反馈信息。</p>
+		<script src="../js/mui.min.js"></script>
+		<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
+		<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
+		<script src='../libs/easymob-webim-sdk/json2.js'></script>
+		<script src="../libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
+		<script src='../js/feedback.js'></script>
+		<script src="../js/feedback-page.js"></script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/js/feedback.js

+(function($, feedback, window, document) {
+
+	/*******************************************/
+	var APP_KEY = 'dcloudio#mui';
+	var CUSTOM_ID = 'customer';
+	//--
+	var PASSWORD = 'pass01!';
+	var LOCAL_STORE_KEY = 'mui://user';
+	var USER_PREFIX = 'mui-user-';
+	/*******************************************/
+
+	/**
+	 * 生成一个 IM 用户名
+	 **/
+	var createUsername = function() {
+		return USER_PREFIX + (new Date()).getTime();
+	};
+
+	/**
+	 * 获取用户，如果在本地存储中已有用户则直接返回。
+	 * 否则，注册新的用户
+	 **/
+	feedback.getUser = function(callback) {
+		var storeUserText = localStorage.getItem(LOCAL_STORE_KEY);
+		if (storeUserText) {
+			if (callback) callback(JSON.parse(storeUserText));
+			return;
+		}
+		var newUsername = createUsername();
+		Easemob.im.Helper.registerUser({
+			username: newUsername,
+			password: PASSWORD,
+			appKey: APP_KEY,
+			success: function(result) {
+				var userInfo = {
+					username: newUsername,
+					password: PASSWORD
+				};
+				localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(userInfo));
+				if (callback) callback(userInfo);
+			},
+			error: function(e) {
+				plus.nativeUI.toast(e.message);
+			}
+		});
+	};
+
+	/**
+	 * 登录环信息服务器
+	 **/
+	feedback.login = function(callback) {
+		feedback.getUser(function(user) {
+			var conn = new Easemob.im.Connection();
+			conn.init({
+				onOpened: function() {
+					//alert("成功登录");
+					conn.setPresence();
+					if (callback) callback(user, conn);
+				}
+			});
+			conn.open({
+				user: user.username,
+				pwd: user.password,
+				appKey: APP_KEY
+			});
+		});
+	};
+
+	/**
+	 * 发送反馈信息
+	 **/
+	feedback.send = function(content, callback) {
+		feedback.login(function(user, conn) {
+			//发送文本消息
+			var msgText = '问题:' + content.question;
+			if (content.contact) {
+				msgText += '; 联系方式:' + content.contact + ';'
+			}
+			conn.sendTextMessage({
+				to: CUSTOM_ID,
+				msg: msgText,
+				type: "chat"
+			});
+			//如果没有截图
+			if (!content.images || content.images.length < 1) {
+				if (callback) callback();
+				return;
+			}
+			//如果有截图
+			var sendImageCount = 0;
+			var hasError = false;
+			content.images.forEach(function(fileInputId) {
+				//alert(fileInputId)
+				conn.sendPicture({
+					fileInputId: fileInputId,
+					to: CUSTOM_ID,
+					onFileUploadError: function(error) {
+						//处理图片上传失败
+						alert(JSON.stringify(error));
+						hasError = true;
+					},
+					onFileUploadComplete: function(data) {
+						//处理图片上传成功，如本地消息显示
+						sendImageCount++;
+						if (!hasError && sendImageCount >= content.images.length) {
+							if (callback) callback();
+						}
+					}
+				});
+			});
+			//--
+		});
+	};
+
+})(mui, window.feedback = {}, window, document);
\ No newline at end of file

examples/hello-mui/js/mui.dtpicker.js

@@ -5,7 +5,7 @@
  * Houfeng@DCloud.io
  */
 
-(function($) {
+(function($, document) {
 	var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
 		<div class="mui-dtpicker-header">\
 			<button data-id="btn-cancel" class="mui-btn">取消</button>\
@@ -70,8 +70,10 @@
 				self.hide();
 			}, false);
 			ui.ok.addEventListener('tap', function() {
-				self.hide();
-				self.callback(self.getSelected());
+				var rs = self.callback(self.getSelected());
+				if (rs !== false) {
+					self.hide();
+				}
 			}, false);
 			ui.y.addEventListener('change', function() {
 				self._createDay();
@@ -123,6 +125,16 @@
 			}
 			return selected;
 		},
+		setSelectedValue: function(value) {
+			var self = this;
+			var ui = self.ui;
+			var parsedValue = self._parseValue(value);
+			ui.y.setSelectedValue(parsedValue.y, true);
+			ui.m.setSelectedValue(parsedValue.m, true);
+			ui.d.setSelectedValue(parsedValue.d, true);
+			ui.h.setSelectedValue(parsedValue.h, true);
+			ui.i.setSelectedValue(parsedValue.i, true);
+		},
 		isLeapYear: function(year) {
 			return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
 		},
@@ -270,12 +282,11 @@
 			ui.cancel.innerText = options.buttons[0];
 			ui.ok.innerText = options.buttons[1];
 		},
-		_getInitValue: function() {
+		_parseValue: function(value) {
 			var self = this;
-			var options = self.options;
 			var rs = {};
-			if (options.value) {
-				var parts = options.value.replace(":", "-").replace(" ", "-").split("-");
+			if (value) {
+				var parts = value.replace(":", "-").replace(" ", "-").split("-");
 				rs.y = parts[0];
 				rs.m = parts[1];
 				rs.d = parts[2];
@@ -302,7 +313,6 @@
 			var now = new Date();
 			options.beginYear = options.beginYear || (now.getFullYear() - 5);
 			options.endYear = options.endYear || (now.getFullYear() + 5);
-			var initValue = self._getInitValue();
 			var ui = self.ui;
 			//设定label
 			self._setLabels();
@@ -315,14 +325,8 @@
 			self._createDay();
 			self._createHours();
 			self._createMinutes();
-			setTimeout(function() {
-				//设定默认值
-				ui.y.setSelectedValue(initValue.y);
-				ui.m.setSelectedValue(initValue.m);
-				ui.d.setSelectedValue(initValue.d);
-				ui.h.setSelectedValue(initValue.h);
-				ui.i.setSelectedValue(initValue.i);
-			}, 160);
+			//设定默认值
+			self.setSelectedValue(options.value);
 		},
 		//显示
 		show: function(callback) {
@@ -330,14 +334,16 @@
 			var ui = self.ui;
 			self.callback = callback || $.noop;
 			ui.mask.show();
-			ui.picker.style.webkitTransform = 'translateY(0px)';
+			document.body.classList.add($.className('dtpicker-active-for-page'));
+			ui.picker.classList.add($.className('active'));
 		},
 		hide: function() {
 			var self = this;
 			var ui = self.ui;
-			ui.picker.style.webkitTransform = 'translateY(300px)';
-			ui.mask.close()
+			ui.picker.classList.remove($.className('active'));
+			ui.mask.close();
+			document.body.classList.remove($.className('dtpicker-active-for-page'));
 		}
 	});
 
-})(mui);
+})(mui, document);
\ No newline at end of file

examples/hello-mui/js/mui.indexedlist.js

@@ -6,6 +6,7 @@
  * by Houfeng
  * Houfeng@DCloud.io
  **/
+
 (function($, window, document) {
 
 	var classSelector = function(name) {
@@ -38,15 +39,15 @@
 		findElements: function() {
 			var self = this;
 			self.el = self.el || {};
-			self.el.search = self.box.querySelector(classSelector('group-list-search'));
-			self.el.searchInput = self.box.querySelector(classSelector('group-list-search-input'));
-			self.el.searchClear = self.box.querySelector(classSelector('group-list-search') + ' ' + classSelector('icon-clear'));
-			self.el.bar = self.box.querySelector(classSelector('group-list-bar'));
-			self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('group-list-bar') + ' a'));
-			self.el.inner = self.box.querySelector(classSelector('group-list-inner'));
-			self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('group-list-item')));
-			self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('group-list-inner') + ' li'));
-			self.el.alert = self.box.querySelector(classSelector('group-list-alert'));
+			self.el.search = self.box.querySelector(classSelector('indexed-list-search'));
+			self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input'));
+			self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear'));
+			self.el.bar = self.box.querySelector(classSelector('indexed-list-bar'));
+			self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a'));
+			self.el.inner = self.box.querySelector(classSelector('indexed-list-inner'));
+			self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));
+			self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li'));
+			self.el.alert = self.box.querySelector(classSelector('indexed-list-alert'));
 		},
 		caleLayout: function() {
 			var self = this;
@@ -121,7 +122,7 @@
 			self.hiddenGroups = [];
 			var checkGroup = function(currentIndex, last) {
 				if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
-					selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
+					selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
 					self.hiddenGroups.push(liArray[groupIndex]);
 				};
 				groupIndex = currentIndex;
@@ -129,7 +130,7 @@
 			}
 			liArray.forEach(function(item) {
 				var currentIndex = liArray.indexOf(item);
-				if (item.classList.contains($.className('group-list-group'))) {
+				if (item.classList.contains($.className('indexed-list-group'))) {
 					checkGroup(currentIndex, false);
 				} else {
 					var text = (item.innerText || '').toLowerCase();
@@ -138,7 +139,7 @@
 					if (keyword && text.indexOf(keyword) < 0 &&
 						value.indexOf(keyword) < 0 &&
 						tags.indexOf(keyword) < 0) {
-						selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
+						selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
 						itemCount++;
 					}
 					if (currentIndex >= itemTotal - 1) {

examples/hello-mui/js/mui.listpicker.js

@@ -5,9 +5,9 @@
  * Houfeng@DCloud.io
  */
 
-(function($) {
+(function($, document) {
 
-	//create dom
+	//创建 DOM
 	$.dom = function(str) {
 		if (typeof(str) !== 'string') {
 			if ((str instanceof Array) || (str[0] && str.length)) {
@@ -23,6 +23,8 @@
 		return [].slice.call($.__create_dom_div__.childNodes);
 	};
 
+	var _listpickerId = 0;
+
 	var ListPicker = $.ListPicker = $.Class.extend({
 		init: function(box, options) {
 			var self = this;
@@ -31,16 +33,23 @@
 			}
 			self.box = box;
 			//避免重复初始化开始
-			if (self.box.__listpicker_inited) return;
-			self.box.__listpicker_inited = true;
+			if (self.box.listpickerId) return;
+			self.listpickerId = self.box.listpickerId = "listpicker-" + (++_listpickerId);
 			//避免重复初始化结束
+			self.box.setAttribute('data-listpicker-id', self.box.listpickerId);
+			//处理 options
 			options = options || {};
 			options.fiexdDur = options.fiexdDur || 150;
-			//ios 默认用 h5 模式
-			if (options.enabledH5 === null || typeof options.enabledH5 === 'undefined') {
-				options.enabledH5 = $.os.ios;
+			options.highlightStyle = options.highlightStyle || 'color: green;';
+			//在 ios 上启用 h5 模式，
+			if ($.os.ios) {
+				options.enabledH5 = true;
+			}
+			//如果没有设定 enabled3d，将默认用 3d 模式
+			if (options.enabled3d === null || typeof options.enabled3d === 'undefined') {
+				options.enabled3d = $.os.ios;
 			}
-			//options.enabledH5 = true;
+			//
 			self.options = options;
 			self._create();
 			self._handleShim();
@@ -53,7 +62,9 @@
 			self.boxInner = $('.mui-listpicker-inner', self.box)[0];
 			self.boxHeight = self.box.offsetHeight;
 			self.list = $('ul', self.boxInner)[0];
-			var firstItem = $('li', self.list)[0];
+			//refresh 中会执行 self.itemElementArray = [].slice.call($('li', self.list));
+			self.refresh();
+			var firstItem = self.itemElementArray[0];
 			self.itemHeight = 0;
 			if (firstItem) {
 				self.itemHeight = firstItem.offsetHeight;
@@ -64,19 +75,31 @@
 				self.list.innerHTML = '';
 			}
 			self.list.style.paddingTop = self.list.style.paddingBottom = (self.boxHeight / 2 - self.itemHeight / 2) + 'px';
+			//创建中间选中项的高亮行
 			self.rule = $.dom('<div class="mui-listpicker-rule"> </div>')[0];
 			self.rule.style.height = self.itemHeight + 'px';
 			self.rule.style.marginTop = -(self.itemHeight / 2) + 'px';
 			self.box.appendChild(self.rule);
-			if ($.os.ios) {
-				self.boxInner.classList.add('mui-listpicker-inner-ios');
+			self.middle = self.boxInner.offsetHeight / 2;
+			self.showLine = parseInt((self.boxInner.offsetHeight / self.itemHeight).toFixed(0));
+			//是否启用 3d 效果
+			if (self.options.enabled3d) {
+				self.box.classList.add('three-dimensional');
 			}
 		},
+		//根据 options 处理不同平台兼容问题
 		_handleShim: function() {
 			var self = this;
 			if (self.options.enabledH5) {
 				self.options.fiexdDur *= 2;
-				self._scrollerApi = $(self.boxInner).scroll();
+				self.boxInner.classList.add($.className('scroll-wrapper'));
+				self.list.classList.add($.className('scroll'));
+				self._scrollerApi = $(self.boxInner).scroll({
+					deceleration: 0.002
+				});
+				//增加惯性滚动时的 scroll 触发处理
+				//shimTetTranslate(self._scrollerApi);
+				//--
 				self.setScrollTop = function(y, dur, callback) {
 					self._scrollerApi.scrollTo(0, -y, dur);
 				};
@@ -102,7 +125,7 @@
 						if (!self.isTouchDown || !$.os.ios) {
 							$.trigger(self.boxInner, 'scrollend');
 						}
-					}, 100);
+					}, 150);
 				}, false);
 				self.aniScrollTop = function(y, dur, callback) {
 					self.disabledScroll = true;
@@ -151,34 +174,39 @@
 		_handleHighlight: function() {
 			var self = this;
 			var scrollTop = self.getScrollTop();
-			var fiexd = (scrollTop / self.itemHeight).toFixed(0);
-			var itemElements = $('li', self.list);
-			for (var index in itemElements) {
-				var itemElement = itemElements[index];
-				if (!itemElement || !itemElement.classList) continue;
+			var fiexd = parseInt((scrollTop / self.itemHeight).toFixed(0));
+			var lastIndex = self.itemElementArray.length - 1;
+			var displayRange = parseInt((self.showLine / 2).toFixed(0));
+			var displayBegin = fiexd - displayRange;
+			var displayEnd = fiexd + displayRange;
+			if (displayBegin < 0) {
+				displayBegin = 0;
+			}
+			if (displayEnd > lastIndex) {
+				displayEnd = lastIndex;
+			}
+			//高亮选中行开始
+			for (var index = displayBegin; index <= displayEnd; index++) {
+				var itemElement = self.itemElementArray[index];
 				if (index == fiexd) {
-					itemElement.classList.add('mui-listpicker-highlight');
+					itemElement.classList.add($.className('listpicker-item-selected'));
+					//itemElement.classList.remove($.className('listpicker-item-before'));
+					//itemElement.classList.remove($.className('listpicker-item-after'));
 				} else {
-					itemElement.classList.remove('mui-listpicker-highlight');
+					//itemElement.classList.add($.className('listpicker-item-' + (fiexd > index ? 'before' : 'after')));
+					itemElement.classList.remove($.className('listpicker-item-selected'));
+				}
+				if (self.options.enabled3d) {
+					//3d 处理开始
+					var itemOffset = self.middle - (itemElement.offsetTop - scrollTop + self.itemHeight / 2) + 1;
+					var percentage = itemOffset / self.itemHeight;
+					var angle = (18 * percentage);
+					//if (angle > 180) angle = 180;
+					//if (angle < -180) angle = -180;
+					itemElement.style.webkitTransform = 'rotateX(' + angle + 'deg) translate3d(0px,0px,' + (0 - Math.abs(percentage * 12)) + 'px)';
+					//3d 处理结束
 				}
 			}
-			/*
-			var opacity = 1;
-			for (var index = fiexd; index >= 0; index--) {
-				var itemElement = itemElements[index];
-				itemElement.style.opacity = opacity;
-				opacity -= 0.25;
-				if (opacity < 0) opacity = 0;
-			}
-			opacity = 1;
-			var length = itemElements.length;
-			for (var index = fiexd; index < itemElements.length; index++) {
-				var itemElement = itemElements[index];
-				itemElement.style.opacity = opacity;
-				opacity -= 0.25;
-				if (opacity < 0) opacity = 0;
-			}
-			*/
 		},
 		_triggerChange: function() {
 			var self = this;
@@ -253,6 +281,10 @@
 				value: itemElement.getAttribute('data-value')
 			};
 		},
+		refresh: function() {
+			var self = this;
+			self.itemElementArray = [].slice.call($('li', self.list));
+		},
 		setItems: function(items) {
 			var self = this;
 			var buffer = [];
@@ -265,10 +297,10 @@
 				buffer.push("<li data-value='" + item.value + "' data-item='" + itemJson + "'>" + item.text + "</li>");
 			};
 			self.list.innerHTML = buffer.join('');
-			//self._scrollEndHandle();
 			if (self._scrollerApi && self._scrollerApi.refresh) {
 				self._scrollerApi.refresh();
 			}
+			self.refresh();
 			self._handleHighlight();
 			self._triggerChange();
 		},
@@ -349,18 +381,19 @@
 				new ListPicker(element, options);
 			} else {
 				var optionsText = element.getAttribute('data-listpicker-options');
-				var options = optionsText ? JSON.parse(optionsText) : {};
-				options.enabledH5 = element.getAttribute('data-listpicker-enabledh5') || options.enabledH5;
-				options.fixedDur = element.getAttribute('data-listpicker-fixddur') || options.fixedDur;
-				new ListPicker(element, options);
+				var _options = optionsText ? JSON.parse(optionsText) : {};
+				_options.enabledH5 = element.getAttribute('data-listpicker-enabledh5') || _options.enabledH5;
+				_options.enabled3d = element.getAttribute('data-listpicker-enabled3d') || _options.enabled3d;
+				_options.fixedDur = element.getAttribute('data-listpicker-fixddur') || _options.fixedDur;
+				new ListPicker(element, _options);
 			}
 		});
 		return this;
 	};
 
-	//auto apply
+	//自动初始化
 	$.ready(function() {
 		$('.mui-listpicker').listpicker();
 	});
 
-})(mui);
+})(mui, document);
\ No newline at end of file

examples/hello-mui/js/mui.poppicker.js

@@ -6,7 +6,7 @@
  * Houfeng@DCloud.io
  */
 
-(function($) {
+(function($, document) {
 
 	var panelBuffer = '<div class="mui-poppicker">\
 		<div class="mui-poppicker-header">\
@@ -44,9 +44,11 @@
 				self.hide();
 			}, false);
 			self.ok.addEventListener('tap', function(event) {
-				self.hide();
 				if (self.callback) {
-					self.callback(self.getSelectedItems());
+					var rs = self.callback(self.getSelectedItems());
+					if (rs !== false) {
+						self.hide();
+					}
 				}
 			}, false);
 			self.mask[0].addEventListener('tap', function() {
@@ -67,7 +69,7 @@
 				self.pickers.push(picker);
 				picker.addEventListener('change', function(event) {
 					var nextPicker = this.nextSibling;
-					if (nextPicker && nextPicker.__listpicker_inited) {
+					if (nextPicker && nextPicker.listpickerId) {
 						var eventData = event.detail || {};
 						var preItem = eventData.item || {};
 						nextPicker.setItems(preItem.children);
@@ -87,7 +89,7 @@
 			var items = [];
 			for (var i in self.pickers) {
 				var picker = self.pickers[i];
-				items.push(picker.getSelectedItem());
+				items.push(picker.getSelectedItem() || {});
 			}
 			return items;
 		},
@@ -96,6 +98,7 @@
 			var self = this;
 			self.callback = callback;
 			self.mask.show();
+			document.body.classList.add($.className('poppicker-active-for-page'));
 			self.panel.classList.add($.className('active'));
 		},
 		//隐藏
@@ -103,7 +106,8 @@
 			var self = this;
 			self.panel.classList.remove($.className('active'));
 			self.mask.close();
+			document.body.classList.remove($.className('poppicker-active-for-page'));
 		}
 	});
 
-})(mui);
+})(mui, document);
\ No newline at end of file

examples/hello-mui/js/mui.pullToRefresh.js

@@ -178,8 +178,8 @@
 					this.isDragging = true;
 					this.removing = false;
 					this.startDeltaY = detail.deltaY;
-					$.gestures.touch.lockDirection = true; //锁定方向
-					$.gestures.touch.startDirection = detail.direction;
+					$.gestures.session.lockDirection = true; //锁定方向
+					$.gestures.session.startDirection = detail.direction;
 					this._pullStart(this.startDeltaY);
 				}
 			}

examples/hello-mui/list.html

@@ -358,6 +358,11 @@
 						chat（聊天窗口） 
 					</a>
 				</li>
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right" href="examples/feedback.html">
+						feedback（问题反馈） 
+					</a>
+				</li>
 				<li class="mui-table-view-cell">
 					<a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
 						image viewer（图片预览）

js/actions.js

@@ -8,7 +8,11 @@
 	var CLASS_ACTION = $.className('action');
 
 	var handle = function(event, target) {
-		if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
+		var className = target.className || '';
+		if (typeof className !== 'string') { //svg className(SVGAnimatedString)
+			className = '';
+		}
+		if (className && ~className.indexOf(CLASS_ACTION)) {
 			if (target.classList.contains($.className('action-back'))) {
 				event.preventDefault();
 			}

js/mui.back.5+.js

@@ -21,6 +21,11 @@
 					$(offCanvas).offCanvas('close');
 					return true;
 				}
+				var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
+				if (previewImage && previewImage.isShown()) {
+					previewImage.close();
+					return true;
+				}
 			}
 		});
 	}

js/mui.class.scroll.js

@@ -113,29 +113,6 @@
 				this.indicators.push(new Indicator(this, indicators[i]));
 			}
 
-			this.wrapper.addEventListener('scrollend', function() {
-				self.indicators.map(function(indicator) {
-					indicator.fade();
-				});
-			});
-
-			this.wrapper.addEventListener('scrollstart', function() {
-				self.indicators.map(function(indicator) {
-					indicator.fade(1);
-				});
-			});
-
-			//			this.wrapper.addEventListener('beforescrollstart', function() {
-			//				self.indicators.map(function(indicator) {
-			//					indicator.fade(1, true);
-			//				});
-			//			});
-
-			this.wrapper.addEventListener('refresh', function() {
-				self.indicators.map(function(indicator) {
-					indicator.refresh();
-				});
-			});
 		},
 		_initSnap: function() {
 			this.currentPage = {};
@@ -214,26 +191,48 @@
 				pageX: 0
 			};
 		},
-		_initEvent: function() {
-			window.addEventListener('orientationchange', this);
-			window.addEventListener('resize', this);
+		_initEvent: function(detach) {
+			var action = detach ? 'removeEventListener' : 'addEventListener';
+			window[action]('orientationchange', this);
+			window[action]('resize', this);
 
-			this.scroller.addEventListener('webkitTransitionEnd', this);
+			this.scroller[action]('webkitTransitionEnd', this);
 
-			this.wrapper.addEventListener('touchstart', this);
-			this.wrapper.addEventListener('touchcancel', this);
-			this.wrapper.addEventListener('touchend', this);
-			this.wrapper.addEventListener('drag', this);
-			this.wrapper.addEventListener('dragend', this);
-			this.wrapper.addEventListener('flick', this);
-			this.wrapper.addEventListener('scrollend', this);
+			this.wrapper[action]('touchstart', this);
+			this.wrapper[action]('touchcancel', this);
+			this.wrapper[action]('touchend', this);
+			this.wrapper[action]('drag', this);
+			this.wrapper[action]('dragend', this);
+			this.wrapper[action]('flick', this);
+			this.wrapper[action]('scrollend', this);
 			if (this.options.scrollX) {
-				this.wrapper.addEventListener('swiperight', this);
+				this.wrapper[action]('swiperight', this);
 			}
 			var segmentedControl = this.wrapper.querySelector($.classSelector('.segmented-control'));
 			if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
-				mui(segmentedControl).on('click', 'a', $.preventDefault);
+				mui(segmentedControl)[detach ? 'off' : 'on']('click', 'a', $.preventDefault);
 			}
+
+			this.wrapper[action]('scrollend', this._handleIndicatorScrollend.bind(this));
+
+			this.wrapper[action]('scrollstart', this._handleIndicatorScrollstart.bind(this));
+
+			this.wrapper[action]('refresh', this._handleIndicatorRefresh.bind(this));
+		},
+		_handleIndicatorScrollend: function() {
+			this.indicators.map(function(indicator) {
+				indicator.fade();
+			});
+		},
+		_handleIndicatorScrollstart: function() {
+			this.indicators.map(function(indicator) {
+				indicator.fade(1);
+			});
+		},
+		_handleIndicatorRefresh: function() {
+			this.indicators.map(function(indicator) {
+				indicator.refresh();
+			});
 		},
 		handleEvent: function(e) {
 			if (this.stopped) {
@@ -329,8 +328,8 @@
 						//						if (direction !== 'left' && direction !== 'right') {
 						//							isReturn = true;
 						//						} else {
-						$.gestures.touch.lockDirection = true; //锁定方向
-						$.gestures.touch.startDirection = detail.direction;
+						$.gestures.session.lockDirection = true; //锁定方向
+						$.gestures.session.startDirection = detail.direction;
 						//						}
 					}
 				} else if (this.options.scrollY && !this.moved) {
@@ -345,8 +344,8 @@
 					//						}
 					//					}
 					if (!this.moved) {
-						$.gestures.touch.lockDirection = true; //锁定方向
-						$.gestures.touch.startDirection = detail.direction;
+						$.gestures.session.lockDirection = true; //锁定方向
+						$.gestures.session.startDirection = detail.direction;
 					}
 				} else if (this.options.scrollX && !this.moved) {
 					isReturn = true;
@@ -372,8 +371,8 @@
 				deltaX = detail.deltaX;
 				deltaY = detail.deltaY;
 			} else { //move
-				deltaX = detail.deltaX - detail.lastDeltaX;
-				deltaY = detail.deltaY - detail.lastDeltaY;
+				deltaX = detail.deltaX - $.gestures.session.prevTouch.deltaX;
+				deltaY = detail.deltaY - $.gestures.session.prevTouch.deltaY;
 			}
 			var absDeltaX = Math.abs(detail.deltaX);
 			var absDeltaY = Math.abs(detail.deltaY);
@@ -647,6 +646,7 @@
 			}
 			this.lastX = this.x;
 			this.lastY = this.y;
+			$.trigger(this.scroller, 'scroll', this);
 		},
 		reLayout: function() {
 			this.wrapper.offsetHeight;
@@ -719,6 +719,11 @@
 		},
 		gotoPage: function(index) {
 			this._gotoPage(index);
+		},
+		destory: function() {
+			this._initEvent(true); //detach
+			delete $.data[this.wrapper.getAttribute('data-scroll')];
+			this.wrapper.setAttribute('data-scroll', '');
 		}
 	});
 	//Indicator

js/mui.class.scroll.pullrefresh.js

@@ -41,9 +41,13 @@
 		},
 		//API
 		resetPosition: function(time) {
-			if (this.pulldown && this.y >= this.options.down.height) {
-				this.pulldownLoading(undefined, time || 0);
-				return true;
+			if (this.pulldown) {
+				if (this.y >= this.options.down.height) {
+					this.pulldownLoading(undefined, time || 0);
+					return true;
+				} else {
+					this.topPocket.classList.remove(CLASS_VISIBILITY);
+				}
 			}
 			return this._super(time);
 		},
@@ -132,7 +136,9 @@
 			} else {
 				pullRefreshApi = $.data[id];
 			}
-			if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
+			if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
+				pullRefreshApi.pulldownLoading(options.down.autoY);
+			} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
 				pullRefreshApi.pullupLoading();
 			}
 			//暂不提供这种调用方式吧			

js/mui.class.scroll.slider.js

@@ -18,10 +18,10 @@
 	var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
 	var SELECTOR_SLIDER_PROGRESS_BAR = $.classSelector('.slider-progress-bar');
 
-
-	var Slider = $.Scroll.extend({
+	var Slider = $.Slider = $.Scroll.extend({
 		init: function(element, options) {
 			this._super(element, $.extend(true, {
+				fingers: 1,
 				interval: 0, //设置为0，则不定时轮播
 				scrollY: false,
 				scrollX: true,
@@ -60,91 +60,100 @@
 				this._initTimer();
 			}
 		},
-		_initEvent: function() {
+		_triggerSlide: function() {
 			var self = this;
-			self._super();
-			self.wrapper.addEventListener('swiperight', $.stopPropagation);
-			self.wrapper.addEventListener('scrollend', function() {
-				self.isInTransition = false;
-				var page = self.currentPage;
-				self.slideNumber = self._fixedSlideNumber();
-				if (self.loop) {
-					if (self.slideNumber === 0) {
-						self.setTranslate(self.pages[1][0].x, 0);
-					} else if (self.slideNumber === self.itemLength - 3) {
-						self.setTranslate(self.pages[self.itemLength - 2][0].x, 0);
-					}
-				}
-				if (self.lastSlideNumber != self.slideNumber) {
-					self.lastSlideNumber = self.slideNumber;
-					$.trigger(self.wrapper, 'slide', {
-						slideNumber: self.slideNumber
-					});
+			self.isInTransition = false;
+			var page = self.currentPage;
+			self.slideNumber = self._fixedSlideNumber();
+			if (self.loop) {
+				if (self.slideNumber === 0) {
+					self.setTranslate(self.pages[1][0].x, 0);
+				} else if (self.slideNumber === self.itemLength - 3) {
+					self.setTranslate(self.pages[self.itemLength - 2][0].x, 0);
 				}
-				self._initTimer();
-			});
-
-			self.wrapper.addEventListener('slide', function(e) {
-				if (e.target !== self.wrapper) {
-					return;
-				}
-				var detail = e.detail;
-				detail.slideNumber = detail.slideNumber || 0;
-				var items = self.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
-				var _slideNumber = detail.slideNumber;
-				if (self.loop) {
-					_slideNumber += 1;
-				}
-				if (!self.wrapper.classList.contains($.className('segmented-control'))) {
-					for (var i = 0, len = items.length; i < len; i++) {
-						var item = items[i];
-						if (item.parentNode === self.scroller) {
-							if (i === _slideNumber) {
-								item.classList.add(CLASS_ACTIVE);
-							} else {
-								item.classList.remove(CLASS_ACTIVE);
-							}
+			}
+			if (self.lastSlideNumber != self.slideNumber) {
+				self.lastSlideNumber = self.slideNumber;
+				self.lastPage = self.currentPage;
+				$.trigger(self.wrapper, 'slide', {
+					slideNumber: self.slideNumber
+				});
+			}
+			self._initTimer();
+		},
+		_handleSlide: function(e) {
+			var self = this;
+			if (e.target !== self.wrapper) {
+				return;
+			}
+			var detail = e.detail;
+			detail.slideNumber = detail.slideNumber || 0;
+			var items = self.scroller.querySelectorAll(SELECTOR_SLIDER_ITEM);
+			var _slideNumber = detail.slideNumber;
+			if (self.loop) {
+				_slideNumber += 1;
+			}
+			if (!self.wrapper.classList.contains($.className('segmented-control'))) {
+				for (var i = 0, len = items.length; i < len; i++) {
+					var item = items[i];
+					if (item.parentNode === self.scroller) {
+						if (i === _slideNumber) {
+							item.classList.add(CLASS_ACTIVE);
+						} else {
+							item.classList.remove(CLASS_ACTIVE);
 						}
 					}
 				}
-				var indicatorWrap = self.wrapper.querySelector($.classSelector('.slider-indicator'));
-				if (indicatorWrap) {
-					if (indicatorWrap.getAttribute('data-scroll')) { //scroll
-						$(indicatorWrap).scroll().gotoPage(detail.slideNumber);
+			}
+			var indicatorWrap = self.wrapper.querySelector($.classSelector('.slider-indicator'));
+			if (indicatorWrap) {
+				if (indicatorWrap.getAttribute('data-scroll')) { //scroll
+					$(indicatorWrap).scroll().gotoPage(detail.slideNumber);
+				}
+				var indicators = indicatorWrap.querySelectorAll($.classSelector('.indicator'));
+				if (indicators.length > 0) { //图片轮播
+					for (var i = 0, len = indicators.length; i < len; i++) {
+						indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
 					}
-					var indicators = indicatorWrap.querySelectorAll($.classSelector('.indicator'));
-					if (indicators.length > 0) { //图片轮播
-						for (var i = 0, len = indicators.length; i < len; i++) {
-							indicators[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
-						}
-					} else {
-						var number = indicatorWrap.querySelector($.classSelector('.number span'));
-						if (number) { //图文表格
-							number.innerText = (detail.slideNumber + 1);
-						} else { //segmented controls
-							var controlItems = self.wrapper.querySelectorAll($.classSelector('.control-item'));
-							for (var i = 0, len = controlItems.length; i < len; i++) {
-								controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
-							}
+				} else {
+					var number = indicatorWrap.querySelector($.classSelector('.number span'));
+					if (number) { //图文表格
+						number.innerText = (detail.slideNumber + 1);
+					} else { //segmented controls
+						var controlItems = self.wrapper.querySelectorAll($.classSelector('.control-item'));
+						for (var i = 0, len = controlItems.length; i < len; i++) {
+							controlItems[i].classList[i === detail.slideNumber ? 'add' : 'remove'](CLASS_ACTIVE);
 						}
 					}
 				}
-				e.stopPropagation();
-			});
+			}
+			e.stopPropagation();
+		},
+		_handleTabShow: function(e) {
+			var self = this;
+			self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
+		},
+		_handleIndicatorTap: function(event) {
+			var target = event.target;
+			if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
+				self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
+				event.stopPropagation();
+			}
+		},
+		_initEvent: function(detach) {
+			var self = this;
+			self._super(detach);
+			var action = detach ? 'removeEventListener' : 'addEventListener';
+			self.wrapper[action]('swiperight', $.stopPropagation);
+			self.wrapper[action]('scrollend', self._triggerSlide.bind(this));
 
-			self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
-				self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
-			});
+			self.wrapper[action]('slide', self._handleSlide.bind(this));
+
+			self.wrapper[action]($.eventName('shown', 'tab'), self._handleTabShow.bind(this));
 			//indicator
 			var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
 			if (indicator) {
-				indicator.addEventListener('tap', function(event) {
-					var target = event.target;
-					if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
-						self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
-						event.stopPropagation();
-					}
-				});
+				indicator[action]('tap', self._handleIndicatorTap.bind(this));
 			}
 		},
 		_drag: function(e) {
@@ -224,7 +233,7 @@
 			//				return;
 			//			}
 			if (e.type === 'flick') {
-				if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
+				if (detail.deltaTime < 200) { //flick，太容易触发，额外校验一下deltaTime
 					this.x = this._getPage((this.slideNumber + (direction === 'right' ? -1 : 1)), true).x;
 				}
 				this.resetPosition(this.options.bounceTime);
@@ -327,6 +336,11 @@
 			} else {
 				this._super();
 			}
+		},
+		destory: function() {
+			this._initEvent(true); //detach
+			delete $.data[this.wrapper.getAttribute('data-slider')];
+			this.wrapper.setAttribute('data-slider', '');
 		}
 	});
 	$.fn.slider = function(options) {

js/mui.detect.5+.js

@@ -12,6 +12,12 @@
 			$(function() {
 				document.body.classList.add($.className('plus'));
 			});
+			if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
+				this.os.stream = true;
+			}
+			$(function() {
+				document.body.classList.add($.className('plus-stream'));
+			});
 		}
 	}
 	detect.call($, navigator.userAgent);

js/mui.event.js

@@ -41,7 +41,7 @@
 	};
 	//简单的wrap对象_mid
 	var mid = function(obj) {
-		return obj._mid || (obj._mid = _mid++);
+		return obj && (obj._mid || (obj._mid = _mid++));
 	};
 	//事件委托对象绑定的事件回调列表
 	var delegateFns = {};

js/mui.gestures.drag.js

@@ -6,31 +6,35 @@
  */
 (function($, name) {
 	var handle = function(event, touch) {
+		var session = $.gestures.session;
 		switch (event.type) {
+			case $.EVENT_START:
+				break;
 			case $.EVENT_MOVE:
-				if (touch.direction) { //drag
-					//修正direction
-					//默认锁定单向drag(后续可能需要额外配置支持)
-					if (touch.lockDirection && touch.startDirection) {
-						if (touch.startDirection && touch.startDirection !== touch.direction) {
-							if (touch.startDirection === 'up' || touch.startDirection === 'down') {
-								touch.direction = touch.deltaY < 0 ? 'up' : 'down';
-							} else {
-								touch.direction = touch.deltaX < 0 ? 'left' : 'right';
-							}
+				if (!touch.direction) {
+					return;
+				}
+				//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
+				if (session.lockDirection && session.startDirection) {
+					if (session.startDirection && session.startDirection !== touch.direction) {
+						if (session.startDirection === 'up' || session.startDirection === 'down') {
+							touch.direction = touch.deltaY < 0 ? 'up' : 'down';
+						} else {
+							touch.direction = touch.deltaX < 0 ? 'left' : 'right';
 						}
 					}
-					if (!touch.drag) {
-						touch.drag = true;
-						$.trigger(event.target, name + 'start', touch);
-					}
-					$.trigger(event.target, name, touch);
-					$.trigger(event.target, name + touch.direction, touch);
 				}
+
+				if (!session.drag) {
+					session.drag = true;
+					$.trigger(event.target, name + 'start', touch);
+				}
+				$.trigger(event.target, name, touch);
+				$.trigger(event.target, name + touch.direction, touch);
 				break;
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
-				if (touch.drag) {
+				if (session.drag && touch.isFinal) {
 					$.trigger(event.target, name + 'end', touch);
 				}
 				break;
@@ -43,6 +47,8 @@
 		name: name,
 		index: 20,
 		handle: handle,
-		options: {}
+		options: {
+			fingers: 1
+		}
 	});
 })(mui, 'drag');
\ No newline at end of file

js/mui.gestures.flick.js

@@ -5,15 +5,31 @@
  * @returns {undefined}
  */
 (function($, name) {
+	var flickStartTime = 0;
 	var handle = function(event, touch) {
-		if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
-			var options = this.options;
-			if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
-				touch.flick = true;
-				$.trigger(event.target, name, touch);
-				$.trigger(event.target, name + touch.direction, touch);
-			}
+		var session = $.gestures.session;
+		var options = this.options;
+		var now = $.now();
+		switch (event.type) {
+			case $.EVENT_MOVE:
+				if (now - flickStartTime > 300) {
+					flickStartTime = now;
+					session.flickStart = touch.center;
+				}
+				break;
+			case $.EVENT_END:
+			case $.EVENT_CANCEL:
+				if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
+					touch.flick = true;
+					touch.flickTime = now - flickStartTime;
+					touch.flickDistanceX = touch.center.x - session.flickStart.x;
+					touch.flickDistanceY = touch.center.y - session.flickStart.y;
+					$.trigger(event.target, name, touch);
+					$.trigger(event.target, name + touch.direction, touch);
+				}
+				break;
 		}
+
 	};
 	/**
 	 * mui gesture flick

js/mui.gestures.hold.js

@@ -10,18 +10,20 @@
 		var options = this.options;
 		switch (event.type) {
 			case $.EVENT_START:
-				clearTimeout(timer);
-				timer = setTimeout(function() {
-					touch.hold = true;
-					$.trigger(event.target, name, touch);
-				}, options.holdTimeout);
+				if ($.options.gestureConfig.hold) {
+					timer && clearTimeout(timer);
+					timer = setTimeout(function() {
+						touch.hold = true;
+						$.trigger(event.target, name, touch);
+					}, options.holdTimeout);
+				}
 				break;
 			case $.EVENT_MOVE:
 				break;
 			case $.EVENT_END:
 			case $.EVENT_CANCEL:
-				clearTimeout(timer);
-				if ($.options.gestureConfig.hold && touch.hold) {
+				if (timer) {
+					clearTimeout(timer) && (timer = null);
 					$.trigger(event.target, 'release', touch);
 				}
 				break;
@@ -35,6 +37,7 @@
 		index: 10,
 		handle: handle,
 		options: {
+			fingers: 1,
 			holdTimeout: 0
 		}
 	});

js/mui.gestures.longtap.js

@@ -12,9 +12,7 @@
 			case $.EVENT_START:
 				clearTimeout(timer);
 				timer = setTimeout(function() {
-					if (!touch.drag) {
-						$.trigger(event.target, name, touch);
-					}
+					$.trigger(event.target, name, touch);
 				}, options.holdTimeout);
 				break;
 			case $.EVENT_MOVE:
@@ -36,6 +34,7 @@
 		index: 10,
 		handle: handle,
 		options: {
+			fingers: 1,
 			holdTimeout: 500,
 			holdThreshold: 2
 		}

js/mui.gestures.pinch.js

+/**
+ * mui gesture pinch
+ * @param {type} $
+ * @param {type} name
+ * @returns {undefined}
+ */
+(function($, name) {
+	var handle = function(event, touch) {
+		var options = this.options;
+		var session = $.gestures.session;
+		switch (event.type) {
+			case $.EVENT_START:
+				break;
+			case $.EVENT_MOVE:
+				if ($.options.gestureConfig.pinch) {
+					if (touch.touches.length < 2) {
+						return;
+					}
+					if (!session.pinch) { //start
+						session.pinch = true;
+						$.trigger(event.target, name + 'start', touch);
+					}
+					$.trigger(event.target, name, touch);
+					var scale = touch.scale;
+					var rotation = touch.rotation;
+					var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
+					var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
+					if (scale > lastScale) { //out
+						lastScale = scale - scaleDiff;
+						$.trigger(event.target, name + 'out', touch);
+					} //in
+					else if (scale < lastScale) {
+						lastScale = scale + scaleDiff;
+						$.trigger(event.target, name + 'in', touch);
+					}
+					if (Math.abs(rotation) > options.minRotationAngle) {
+						$.trigger(event.target, 'rotate', touch);
+					}
+				}
+				break;
+			case $.EVENT_END:
+			case $.EVENT_CANCEL:
+				if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
+					$.trigger(event.target, name + 'end', touch);
+				}
+				break;
+		}
+	};
+	/**
+	 * mui gesture pinch
+	 */
+	$.registerGesture({
+		name: name,
+		index: 10,
+		handle: handle,
+		options: {
+			minRotationAngle: 0
+		}
+	});
+})(mui, 'pinch');
\ No newline at end of file

js/mui.gestures.swipe.js

@@ -8,8 +8,9 @@
 	var handle = function(event, touch) {
 		if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
 			var options = this.options;
-			if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
+			if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
 				touch.swipe = true;
+				$.trigger(event.target, name, touch);
 				$.trigger(event.target, name + touch.direction, touch);
 			}
 		}

js/mui.gestures.tap.js

@@ -5,23 +5,33 @@
  * @returns {undefined}
  */
 (function($, name) {
+	var lastTarget;
+	var lastTapTime;
 	var handle = function(event, touch) {
-		//if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
-		if (event.type === $.EVENT_END) { //ignore touchcancel
-			var options = this.options;
-			if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
-				if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
-					if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
-						$.trigger(event.target, 'doubletap', touch);
-						touch.lastTapTime = $.now();
-						touch.lastTarget = event.target;
-						return;
+		var options = this.options;
+		switch (event.type) {
+			case $.EVENT_END:
+				if (!touch.isFinal) {
+					return;
+				}
+				var target = event.target;
+				if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
+					return;
+				}
+				if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
+					if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
+						if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
+							$.trigger(target, 'doubletap', touch);
+							lastTapTime = $.now();
+							lastTarget = target;
+							return;
+						}
 					}
+					$.trigger(target, name, touch);
+					lastTapTime = $.now();
+					lastTarget = event.target;
 				}
-				$.trigger(event.target, name, touch);
-				touch.lastTapTime = $.now();
-				touch.lastTarget = event.target;
-			}
+				break;
 		}
 	};
 	/**
@@ -32,6 +42,7 @@
 		index: 30,
 		handle: handle,
 		options: {
+			fingers: 1,
 			tapMaxInterval: 300,
 			tapMaxDistance: 5,
 			tapMaxTime: 250

js/mui.init.js

@@ -12,7 +12,8 @@
 			hold: false,
 			flick: true,
 			swipe: true,
-			drag: true
+			drag: true,
+			pinch: false
 		}
 	};
 	/**

js/mui.offcanvas.js

@@ -95,10 +95,10 @@
 				case 'drag':
 					var detail = e.detail;
 					if (!this.startX) {
-						this.startX = detail.move.x;
+						this.startX = detail.center.x;
 						this.lastX = this.startX;
 					} else {
-						this.lastX = detail.move.x;
+						this.lastX = detail.center.x;
 					}
 					if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
 						if (this.slideIn) {
@@ -118,8 +118,8 @@
 							this.startX = this.lastX;
 							this.isDragging = true;
 
-							$.gestures.touch.lockDirection = true; //锁定方向
-							$.gestures.touch.startDirection = detail.direction;
+							$.gestures.session.lockDirection = true; //锁定方向
+							$.gestures.session.startDirection = detail.direction;
 
 							this.scroller.classList.remove(CLASS_TRANSITIONING);
 							this.offsetX = this.getTranslateX();

js/mui.view.js

@@ -85,8 +85,8 @@
 
 					if (this.previousPage && this.activePage) {
 						this.dragging = true;
-						$.gestures.touch.lockDirection = true; //锁定方向
-						$.gestures.touch.startDirection = detail.direction;
+						$.gestures.session.lockDirection = true; //锁定方向
+						$.gestures.session.startDirection = detail.direction;
 					}
 				}
 			}

js/popovers.js

@@ -166,7 +166,7 @@
 		if (!popover || !anchor) {
 			return;
 		}
-		
+
 		if (isActionSheet) { //actionsheet
 			setStyle(popover, 'block')
 			return;

js/pullrefresh.5+.js

@@ -132,10 +132,16 @@
 				});
 			}
 		},
-		pulldownLoading: function() {
+		pulldownLoading: function() { //该方法是子页面调用的
 			var callback = $.options.pullRefresh.down.callback;
 			callback && callback.call(this);
 		},
+		_pulldownLoading: function() { //该方法是子页面调用的
+			var self = this;
+			$.plusReady(function() {
+				plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()");
+			});
+		},
 		endPulldownToRefresh: function() { //该方法是子页面调用的
 			var webview = plus.webview.currentWebview();
 			webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
@@ -237,7 +243,9 @@
 		} else {
 			pullRefreshApi = $.data[id];
 		}
-		if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
+		if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
+			pullRefreshApi._pulldownLoading(); //parent webview
+		} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
 			pullRefreshApi.pullupLoading();
 		}
 		return pullRefreshApi;

js/tableviews.js

@@ -145,7 +145,7 @@
 							timer = $.later(function() {
 								toggleActive(true);
 							}, 100);
-						} else{
+						} else {
 							toggleActive(true);
 						}
 					}
@@ -426,8 +426,8 @@
 		sliderHandle && toggleEvents(cell, true);
 	});
 	var radioOrCheckboxClick = function(event) {
-		var type = event.target&&event.target.type||'';
-		if(type==='radio'||type==='checkbox'){
+		var type = event.target && event.target.type || '';
+		if (type === 'radio' || type === 'checkbox') {
 			return;
 		}
 		var classList = cell.classList;

package.json

 {
   "name": "mui",
   "description": "Build mobile apps with simple HTML, CSS, and JS components.",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "keywords": [
     "css",
     "fonts",