diff --git a/dist/btn/index.wxml b/dist/btn/index.wxml
index a1301c48..e1626d00 100644
--- a/dist/btn/index.wxml
+++ b/dist/btn/index.wxml
@@ -1,5 +1,7 @@
-<button 
+<button
   class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  disabled="{{ disabled }}"
+  hover-class="button-hover"
   open-type="{{ openType }}"
   app-parameter="{{ appParameter }}"
   hover-stop-propagation="{{ hoverStopPropagation }}"
diff --git a/dist/cell-group/index.js b/dist/cell-group/index.js
index 29a29c64..3514148e 100644
--- a/dist/cell-group/index.js
+++ b/dist/cell-group/index.js
@@ -1,48 +1,61 @@
 'use strict';
 
+var _relations;
+
+var CELL_PATH = '../cell/index';
+var FIELD_PATH = '../field/index';
+
 Component({
-  relations: {
-    '../cell/index': {
-      type: 'child',
-      linked: function linked() {
-        this._updateIsLastCell();
-      },
-      linkChanged: function linkChanged() {
-        this._updateIsLastCell();
-      },
-      unlinked: function unlinked() {
-        this._updateIsLastCell();
-      }
+  relations: (_relations = {}, _relations[CELL_PATH] = {
+    type: 'child',
+    linked: function linked() {
+      this._updateIsLastElement(CELL_PATH);
+    },
+    linkChanged: function linkChanged() {
+      this._updateIsLastElement(CELL_PATH);
+    },
+    unlinked: function unlinked() {
+      this._updateIsLastElement(CELL_PATH);
     }
-  },
+  }, _relations[FIELD_PATH] = {
+    type: 'child',
+    linked: function linked() {
+      this._updateIsLastElement(FIELD_PATH);
+    },
+    linkChanged: function linkChanged() {
+      this._updateIsLastElement(FIELD_PATH);
+    },
+    unlinked: function unlinked() {
+      this._updateIsLastElement(FIELD_PATH);
+    }
+  }, _relations),
 
   data: {
-    cellUpdateTimeout: 0
+    elementUpdateTimeout: 0
   },
 
   methods: {
-    _updateIsLastCell: function _updateIsLastCell() {
+    _updateIsLastElement: function _updateIsLastElement(childPath) {
       var _this = this;
 
       // 用 setTimeout 减少计算次数
-      if (this.data.cellUpdateTimeout > 0) {
+      if (this.data.elementUpdateTimeout > 0) {
         return;
       }
 
-      var cellUpdateTimeout = setTimeout(function () {
-        _this.setData({ cellUpdateTimeout: 0 });
-        var cells = _this.getRelationNodes('../cell/index');
+      var elementUpdateTimeout = setTimeout(function () {
+        _this.setData({ elementUpdateTimeout: 0 });
+        var elements = _this.getRelationNodes(childPath);
+        if (elements.length > 0) {
+          var lastIndex = elements.length - 1;
 
-        if (cells.length > 0) {
-          var lastIndex = cells.length - 1;
-
-          cells.forEach(function (cell, index) {
-            cell.updateIsLastCell(index === lastIndex);
+          elements.forEach(function (cell, index) {
+            cell.updateIsLastElement(index === lastIndex);
           });
         }
       });
 
-      this.setData({ cellUpdateTimeout: cellUpdateTimeout });
+      this.setData({ elementUpdateTimeout: elementUpdateTimeout });
     }
   }
 });
\ No newline at end of file
diff --git a/dist/cell/index.js b/dist/cell/index.js
index a80060f3..dab3047f 100644
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@@ -71,7 +71,7 @@ Component({
 
 
     // 用于被 cell-group 更新，标志是否是最后一个 cell
-    updateIsLastCell: function updateIsLastCell(isLastCell) {
+    updateIsLastElement: function updateIsLastElement(isLastCell) {
       this.setData({ isLastCell: isLastCell });
     }
   }
diff --git a/dist/datetime-picker/date-picker-view.wxml b/dist/datetime-picker/date-picker-view.wxml
new file mode 100644
index 00000000..0a69f841
--- /dev/null
+++ b/dist/datetime-picker/date-picker-view.wxml
@@ -0,0 +1,35 @@
+<import src="./picker-view-column.wxml" />
+
+<template name="date-picker-view">
+  <picker-view
+    value="{{ selected }}"
+    bindchange="change"
+    indicator-style="height: 50px;"
+    class="picker-visible">
+    
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[0], className: 'year-view-column', hidden: !use['years'], tip: '年' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[1], hidden: !use['months'], tip: '月' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[2], hidden: !use['days'], tip: '日' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[3], hidden: !use['hours'], tip: '时' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[4], hidden: !use['minutes'], tip: '分' }}"
+    />
+    <template
+      is="picker-view-column"
+      data="{{ data: dataList[5], hidden: !use['seconds'], tip: '秒' }}"
+    />
+  </picker-view>
+</template>
\ No newline at end of file
diff --git a/dist/datetime-picker/date-picker.js b/dist/datetime-picker/date-picker.js
new file mode 100644
index 00000000..eea6c23a
--- /dev/null
+++ b/dist/datetime-picker/date-picker.js
@@ -0,0 +1,105 @@
+'use strict';
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var LIMIT_YEAR_COUNT = 50;
+
+var _require = require('./utils'),
+    genNumber = _require.genNumber,
+    iso2utc = _require.iso2utc;
+
+module.exports = function () {
+  function DatePicker() {
+    var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
+
+    _classCallCheck(this, DatePicker);
+
+    this.types = ['year', 'month', 'day', 'hour', 'minute', 'second'];
+    this.months = genNumber(1, 12, 2);
+    this.hours = genNumber(0, 23, 2);
+    this.seconds = genNumber(0, 59, 2);
+    this.minutes = genNumber(0, 59, 2);
+    this._date = date;
+  }
+
+  DatePicker.prototype.getYears = function getYears(year) {
+    var mid = Math.floor(LIMIT_YEAR_COUNT / 2);
+    var min = year - mid;
+    var max = year + (LIMIT_YEAR_COUNT - mid);
+    return genNumber(min, max, 4);
+  };
+
+  DatePicker.prototype.lastDay = function lastDay(year, month) {
+    return month !== 12 ? new Date(new Date(year + '/' + (month + 1) + '/1').getTime() - 24 * 60 * 60 * 1000).getDate() : 31;
+  };
+
+  DatePicker.prototype.getData = function getData(date) {
+    date = date || this._date || new Date();
+
+    // toUTCString ISO 格式部分 ios 手机会失败
+    if (typeof date === 'string' && date.indexOf('-') > 0) {
+      date = iso2utc(date);
+    }
+
+    var d = new Date(date);
+
+    var y = d.getFullYear();
+    var m = d.getMonth() + 1;
+    var years = this.getYears(y);
+    var lastDay = this.lastDay(y, m);
+    var days = genNumber(1, lastDay, 2);
+
+    this._years = years;
+    this._dataList = [years, this.months, days, this.hours, this.minutes, this.seconds];
+    this._indexs = [25, m - 1, d.getDate() - 1, d.getHours(), d.getMinutes(), d.getSeconds()];
+
+    return {
+      dataList: this._dataList,
+      selected: this._indexs
+    };
+  };
+
+  DatePicker.prototype.update = function update(col, index) {
+    var type = this.types[col];
+    switch (type) {
+      case 'year':
+        return this._updateYear(col, index);
+      case 'month':
+        return this._updateMonth(col, index);
+      default:
+        this._indexs[col] = index;
+        return [{ col: col, index: index }];
+    }
+  };
+
+  DatePicker.prototype._updateYear = function _updateYear(col, index, cb) {
+    var years = this._dataList[col];
+    var year = years[index];
+
+    this._dataList[col] = this.getYears(+year);
+
+    this._indexs[col] = Math.floor(LIMIT_YEAR_COUNT / 2);
+
+    return [{ col: 0, index: this._indexs[col], data: this._dataList[col] }];
+  };
+
+  DatePicker.prototype._updateMonth = function _updateMonth(col, index) {
+    var month = this._dataList[col][index];
+    var year = this._dataList[0][this._indexs[0]];
+    var lastDay = this.lastDay(+year, +month);
+    this._indexs[col] = index;
+    this._dataList[2] = genNumber(1, lastDay, 2);
+    this._indexs[2] = this._indexs[2] >= this._dataList[2].length ? this._dataList[2].length - 1 : this._indexs[2];
+
+    return [{
+      col: 1,
+      index: index
+    }, {
+      col: 2,
+      index: this._indexs[2],
+      data: this._dataList[2]
+    }];
+  };
+
+  return DatePicker;
+}();
\ No newline at end of file
diff --git a/dist/datetime-picker/index.js b/dist/datetime-picker/index.js
index 7a21cc5b..91341975 100644
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@@ -1,200 +1,11 @@
 'use strict';
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var DatePicker = require('./date-picker');
 
-function partStartWithZero(num, strlen) {
-  var zeros = '';
-  while (zeros.length < strlen) {
-    zeros += '0';
-  }
-  return (zeros + num).slice(-strlen);
-}
+var _require = require('./utils'),
+    genNumber = _require.genNumber,
+    moment = _require.moment;
 
-function genNumber(begin, end, strlen) {
-  var nums = [];
-  while (begin <= end) {
-    nums.push(partStartWithZero(begin, strlen));
-    begin++;
-  }
-  return nums;
-}
-
-function moment(date) {
-  var formatStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY:MM:DD';
-
-  if (!date && date !== 0) date = new Date();
-
-  date = new Date(date);
-  if (date.toString() === 'Invalid Date') throw new Error('Invalid Date');
-
-  var getDateValue = function getDateValue(method, fn) {
-    return fn ? fn(date['get' + method]()) : date['get' + method]();
-  };
-  var map = new Map();
-
-  map.set(/(Y+)/i, function () {
-    return getDateValue('FullYear', function (year) {
-      return (year + '').substr(4 - RegExp.$1.length);
-    });
-  });
-  map.set(/(M+)/, function () {
-    return getDateValue('Month', function (month) {
-      return partStartWithZero(month + 1, RegExp.$1.length);
-    });
-  });
-  map.set(/(D+)/i, function () {
-    return getDateValue('Date', function (date) {
-      return partStartWithZero(date, RegExp.$1.length);
-    });
-  });
-  map.set(/(H+)/i, function () {
-    return getDateValue('Hours', function (hour) {
-      return partStartWithZero(hour, RegExp.$1.length);
-    });
-  });
-  map.set(/(m+)/, function () {
-    return getDateValue('Minutes', function (minute) {
-      return partStartWithZero(minute, RegExp.$1.length);
-    });
-  });
-  map.set(/(s+)/, function () {
-    return getDateValue('Seconds', function (second) {
-      return partStartWithZero(second, RegExp.$1.length);
-    });
-  });
-
-  for (var _iterator = map, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref2 = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref2 = _i.value;
-    }
-
-    var _ref = _ref2;
-    var reg = _ref[0];
-    var fn = _ref[1];
-
-    if (reg.test(formatStr)) {
-      formatStr = formatStr.replace(RegExp.$1, fn.call(null));
-    }
-  }
-
-  return formatStr;
-}
-
-var LIMIT_YEAR_COUNT = 50;
-
-var DatePicker = function () {
-  function DatePicker(format) {
-    var date = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Date();
-    var cb = arguments[2];
-
-    _classCallCheck(this, DatePicker);
-
-    this.types = ['year', 'month', 'day', 'hour', 'minute', 'second'];
-    this.months = genNumber(1, 12, 2);
-    this.hours = genNumber(0, 23, 2);
-    this.seconds = genNumber(0, 59, 2);
-    this.minutes = genNumber(0, 59, 2);
-    // this.format(format);
-    this.init(date, cb);
-  }
-
-  DatePicker.prototype.getYears = function getYears(year) {
-    var mid = Math.floor(LIMIT_YEAR_COUNT / 2);
-    var min = year - mid;
-    var max = year + (LIMIT_YEAR_COUNT - mid);
-    return genNumber(min, max, 4);
-  };
-
-  DatePicker.prototype.lastDay = function lastDay(year, month) {
-    return month !== 12 ? new Date(new Date(year + '/' + (month + 1) + '/1').getTime() - 24 * 60 * 60 * 1000).getDate() : 31;
-  };
-
-  DatePicker.prototype.init = function init(date, cb) {
-    var d = new Date(date);
-    var y = d.getFullYear();
-    var m = d.getMonth() + 1;
-    var years = this.getYears(y);
-    var lastDay = this.lastDay(y, m);
-
-    var days = genNumber(1, lastDay, 2);
-
-    this._years = years;
-    this._dataList = [years, this.months, days, this.hours, this.minutes, this.seconds];
-    this._indexs = [25, m - 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
-    cb && cb({
-      dataList: this._dataList,
-      indexs: this._indexs
-    });
-  };
-
-  DatePicker.prototype.update = function update(col, index, cb) {
-    var type = this.types[col];
-    switch (type) {
-      case 'year':
-        this._updateYear(col, index, cb);
-        break;
-      case 'month':
-        this._updateMonth(col, index, cb);
-        break;
-      default:
-        this._indexs[col] = index;
-        cb && cb({
-          dataList: this._dataList,
-          indexs: this._indexs,
-          updateColumn: col,
-          updateIndex: index
-        });
-    }
-  };
-
-  DatePicker.prototype._updateYear = function _updateYear(col, index, cb) {
-    var years = this._dataList[col];
-    var year = years[index];
-
-    this._dataList[col] = this.getYears(+year);
-
-    this._indexs[col] = Math.floor(LIMIT_YEAR_COUNT / 2);
-    cb && cb({
-      dataList: this._dataList,
-      indexs: this._indexs,
-      updateColumn: col
-    });
-  };
-
-  DatePicker.prototype._updateMonth = function _updateMonth(col, index, cb) {
-    var month = this._dataList[col][index];
-    var year = this._dataList[0][this._indexs[0]];
-    var lastDay = this.lastDay(+year, +month);
-    this._indexs[col] = index;
-    this._dataList[2] = genNumber(1, lastDay, 2);
-    this._indexs[2] = this._indexs[2] >= this._dataList[2].length ? this._dataList[2].length - 1 : this._indexs[2];
-    cb && cb({
-      dataList: this._dataList,
-      indexs: this._indexs,
-      updateColumn: 2,
-      updateIndex: this._indexs[2]
-    });
-    cb && cb({
-      dataList: this._dataList,
-      indexs: this._indexs,
-      updateColumn: 1,
-      updateIndex: index
-    });
-  };
-
-  return DatePicker;
-}();
-// 组件内使用 this.indexs 好像有问题
-
-
-var _indexs = [];
 Component({
   properties: {
     placeholder: {
@@ -205,15 +16,20 @@ Component({
       type: String,
       value: 'YYYY-MM-DD HH:mm:ss'
     },
-    native: {
-      type: Boolean
-    },
     pickerView: {
       type: Boolean
     },
     date: {
       type: String,
-      value: new Date()
+      observer: function observer(value) {
+        if (value === {}.toString()) {
+          throw new Error('参数必须是一个字符串');
+        }
+        if (/^[0-9]+$/.test(value)) {
+          value = +value;
+        }
+        this.updateDate(value);
+      }
     },
     notUse: {
       type: Array
@@ -226,108 +42,96 @@ Component({
   attached: function attached() {
     var _this = this;
 
-    this.use = {};['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach(function (item) {
+    this.use = {};
+
+    ['years', 'months', 'days', 'hours', 'minutes', 'seconds'].forEach(function (item) {
       if ((_this.data.notUse || []).indexOf(item) === -1) {
         _this.use[item] = true;
       }
     });
-    this.setData({ use: this.use });
-    this.data.pickerView && !this.data.native && this.showPicker();
-  },
-  ready: function ready() {
-    // 微信 bug，如果不先定义会导致不能选中
+
+    this.picker = new DatePicker(this.data.date);
+
+    var _picker$getData = this.picker.getData(this.data.date),
+        dataList = _picker$getData.dataList,
+        selected = _picker$getData.selected;
+
+    // 鬼他么知道为什么 dataList, selected 不能一起 setData
+
+
     this.setData({
-      "dataList": [["2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041", "2042", "2043"], genNumber(1, 12, 2), genNumber(0, 31, 2), genNumber(0, 23, 2), genNumber(0, 59, 2), genNumber(0, 59, 2)]
+      use: this.use,
+      dataList: dataList
+    }, function () {
+      _this.setData({
+        selected: selected
+      });
     });
-    this.picker = new DatePicker(this.data.format, this.data.date, this.updatePicker.bind(this));
+
+    this._indexs = selected;
   },
 
+
   methods: {
-    updatePicker: function updatePicker(_ref3) {
-      var dataList = _ref3.dataList,
-          indexs = _ref3.indexs,
-          updateColumn = _ref3.updateColumn,
-          updateIndex = _ref3.updateIndex;
+    updatePicker: function updatePicker() {
+      var updateData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
 
-      var updateData = {};
-      _indexs = indexs;
-      // 指定更新某列数据，表示某列数据更新
-      if (updateColumn) {
-        updateData['transPos[' + updateColumn + ']'] = -36 * _indexs[updateColumn];
-        updateData['dataList[' + updateColumn + ']'] = dataList[updateColumn];
-      }
-      // 指定更新某列索引，表示某列数据选中的索引已更新
-      if (typeof updateIndex !== 'undefined') {
-        updateData['transPos[' + updateColumn + ']'] = -36 * _indexs[updateColumn];
-        updateData['selected[' + updateColumn + ']'] = indexs[updateColumn];
+      var _updateData = {};
+
+      for (var _iterator = updateData, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+        var _ref2;
+
+        if (_isArray) {
+          if (_i >= _iterator.length) break;
+          _ref2 = _iterator[_i++];
+        } else {
+          _i = _iterator.next();
+          if (_i.done) break;
+          _ref2 = _i.value;
+        }
+
+        var _ref = _ref2;
+        var col = _ref.col,
+            index = _ref.index,
+            data = _ref.data;
+
+        if (~index && this._indexs[col] !== index || col === 0) {
+          _updateData['selected[' + col + ']'] = index; // 更新索引
+          this._indexs[col] = index;
+        }
+
+        if (data) {
+          _updateData['dataList[' + col + ']'] = data;
+        }
       }
 
-      // 只在初始化时设置全部的值，其他的都局部更新
-      if (!updateColumn && typeof updateIndex === 'undefined') {
-        updateData = { dataList: dataList, selected: indexs };
-        _indexs.forEach(function (item, index) {
-          updateData['transPos[' + index + ']'] = -item * 36;
-        });
-      }
-
-      this.setData(updateData);
+      this.setData(_updateData);
     },
-    touchmove: function touchmove(e) {
-      var changedTouches = e.changedTouches,
-          target = e.target;
-
-      var col = target.dataset.col;
-      var clientY = changedTouches[0].clientY;
-
-      if (!col) return;
-
-      var updateData = {};
-      var itemLength = this.data.dataList[col].length;
-      updateData['transPos[' + col + ']'] = this.startTransPos + (clientY - this.startY);
-      if (updateData['transPos[' + col + ']'] >= 0) {
-        updateData['transPos[' + col + ']'] = 0;
-      } else if (-(itemLength - 1) * 36 >= updateData['transPos[' + col + ']']) {
-        updateData['transPos[' + col + ']'] = -(itemLength - 1) * 36;
-      }
-      this.setData(updateData);
-    },
-    touchStart: function touchStart(e) {
-      var target = e.target,
-          changedTouches = e.changedTouches;
-
-      var col = target.dataset.col;
-      var touchData = changedTouches[0];
-      if (!col) return;
-
-      this.startY = touchData.clientY;
-      this.startTime = e.timeStamp;
-      this.startTransPos = this.data.transPos[col];
-    },
-    touchEnd: function touchEnd(e) {
-      var col = e.target.dataset.col;
-
-      if (!col) return;
-      var pos = this.data.transPos[col];
-      var itemIndex = Math.round(pos / 36);
-
-      this.columnchange({ detail: { column: +col, value: -itemIndex } });
-    },
-    columnchange: function columnchange(e) {
-      var _e$detail = e.detail,
-          column = _e$detail.column,
-          value = _e$detail.value;
-
-      _indexs[column] = value;
-      this.picker.update(column, value, this.updatePicker.bind(this));
-      this.data.pickerView && !this.data.native && this.change({ detail: { value: _indexs } });
-    },
-    getFormatStr: function getFormatStr() {
+    updateDate: function updateDate(date) {
       var _this2 = this;
 
-      var date = new Date();['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].forEach(function (key, index) {
-        var value = _this2.data.dataList[index][_indexs[index]];
+      var _picker$getData2 = this.picker.getData(date),
+          dataList = _picker$getData2.dataList,
+          selected = _picker$getData2.selected;
+
+      this._indexs = selected;
+
+      // 好像必须要等到 datalist 完成
+      this.setData({ dataList: dataList }, function () {
+        _this2.setData({
+          selected: selected,
+          text: _this2.getFormatStr()
+        });
+      });
+    },
+    getFormatStr: function getFormatStr() {
+      var _this3 = this;
+
+      var date = new Date();
+      ['FullYear', 'Month', 'Date', 'Hours', 'Minutes', 'Seconds'].forEach(function (key, index) {
+        var value = _this3.data.dataList[index][_this3._indexs[index]];
         if (key === 'Month') {
-          value = +_this2.data.dataList[index][_indexs[index]] - 1;
+          value = +_this3.data.dataList[index][_this3._indexs[index]] - 1;
         }
         date['set' + key](+value);
       });
@@ -335,18 +139,38 @@ Component({
       return moment(date, this.data.format);
     },
     showPicker: function showPicker() {
-      this.setData({ show: true });
+      this.setData({
+        show: true
+      });
     },
     hidePicker: function hidePicker(e) {
       var action = e.currentTarget.dataset.action;
 
-      this.setData({ show: false });
+
+      this.setData({
+        show: false
+      });
+
       if (action === 'cancel') {
-        this.cancel({ detail: {} });
+        this.cancel({
+          detail: {}
+        });
       } else {
-        this.change({ detail: { value: _indexs } });
+        this.change({
+          detail: {
+            value: this._indexs
+          }
+        });
       }
     },
+    columnchange: function columnchange(e) {
+      var _e$detail = e.detail,
+          column = _e$detail.column,
+          value = _e$detail.value;
+
+      var updateData = this.picker.update(column, value);
+      this.updatePicker(updateData);
+    },
     change: function change(e) {
       var value = e.detail.value;
 
@@ -355,23 +179,25 @@ Component({
         return +item[value[index]];
       });
 
-      this.triggerEvent('change', { value: data });
+      this.triggerEvent('change', {
+        value: data
+      });
 
-      // 为了支持原生 picker view，每次 change 都需要手动 columnchange
-      if (this.data.pickerView && this.data.native) {
-        for (var index = 0; index < value.length; index++) {
-          if (_indexs[index] !== value[index]) {
-            this.columnchange({
-              detail: {
-                column: index, value: value[index]
-              }
-            });
-            break; // 这里每次只处理一列，否则会出现日期值为 undefined 的情况
-          }
+      // 手动触发 columnchange
+      for (var index = 0; index < value.length; index++) {
+        if (this._indexs[index] !== value[index]) {
+          this.columnchange({
+            detail: {
+              column: index,
+              value: value[index]
+            }
+          });
         }
       }
 
-      this.setData({ text: this.getFormatStr() });
+      this.setData({
+        text: this.getFormatStr()
+      });
     },
     cancel: function cancel(e) {
       this.triggerEvent('cancel', e.detail);
diff --git a/dist/datetime-picker/index.json b/dist/datetime-picker/index.json
index 32640e0d..10d4a702 100644
--- a/dist/datetime-picker/index.json
+++ b/dist/datetime-picker/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index"    
+  }
 }
\ No newline at end of file
diff --git a/dist/datetime-picker/index.wxml b/dist/datetime-picker/index.wxml
index 35a04a94..2bba4abb 100644
--- a/dist/datetime-picker/index.wxml
+++ b/dist/datetime-picker/index.wxml
@@ -1,111 +1,18 @@
-<block wx:if="{{ pickerView }}">
-  <picker-view
-    wx:if="{{ native }}"
-    value="{{ selected }}"
-    bindchange="change"
-    indicator-style="height: 50px;"
-    class="picker-visible">
-    <picker-view-column>
-      <view wx:for="{{dataList[0]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
+<import src="./date-picker-view.wxml" />
 
-    <picker-view-column>
-      <view wx:for="{{dataList[1]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
+<view wx:if="{{ !pickerView }}" bindtap="showPicker" class="placeholder-class">{{text || placeholder}}</view>
 
-    <picker-view-column>
-      <view wx:for="{{dataList[2]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
-
-    <picker-view-column>
-      <view wx:for="{{dataList[3]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
-
-    <picker-view-column>
-      <view wx:for="{{dataList[4]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
-
-    <picker-view-column>
-      <view wx:for="{{dataList[5]}}" style="line-height: 50px" wx:key="*this">{{item}}</view>
-    </picker-view-column>
-  </picker-view>
-</block>
-<block wx:else>
-  <picker
-    wx:if="{{native}}"
-    mode="multiSelector" 
-    range="{{ dataList }}" 
-    value="{{ selected }}"
-    bindchange="change"
-    bindcolumnchange="columnchange"
-    bindcancel="cancel" >
-    <view class="placeholder-class">
-      {{text || placeholder}}
+<view wx:if="{{ pickerView }}" class="picker-view">
+  <template is="date-picker-view" data="{{ dataList, selected, use }}" />
+</view>
+<view wx:else>
+  <pop-manager show="{{ show }}" type="bottom" >
+    <view class="picker">
+      <view class="picker-action">
+        <view data-action="cancel" bindtap="hidePicker">取消</view>
+        <view data-action="change" bindtap="hidePicker">确认</view>
+      </view>
+      <template is="date-picker-view" data="{{ dataList, selected, use }}" />
     </view>
-  </picker>
-</block>
-<view data-action="cancel" bindtap="hidePicker" class="picker-mask {{show && !pickerView ? 'show' : ''}}"></view>
-<view wx:if="{{ !native }}" class="data-time-picker {{ pickerView && 'picker-view' }}">
-  <view bindtap="showPicker" wx:if="{{ !pickerView }}" class="placeholder-class">{{text || placeholder}}</view>
-  <view class="picker {{show ? 'picker-visible' : ''}}">
-    <view wx:if="{{!pickerView}}" class="picker-action">
-      <view data-action="cancel" bindtap="hidePicker">取消</view>
-      <view data-action="change" bindtap="hidePicker">确认</view>
-    </view>
-    <view 
-      catchtouchstart="touchStart" 
-      catchtouchend="touchEnd" 
-      catchtouchmove="touchmove" class="picker-cols">
-
-      <view wx:if="{{use['years']}}" data-col="0" class="col">
-        <view data-col="0" style="transform: translateY({{ transPos[0] }}px)">
-          <view data-col="0" class="{{ index === selected[0] ? 'select-item' : '' }} cell" 
-            wx:for-index="index" 
-            wx:for="{{dataList[0]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['years']}}" data-col="0" class="fixed-col">年</view>
-
-      <view wx:if="{{use['months']}}" data-col="1" class="col">
-        <view data-col="1" style="transform: translateY({{ transPos[1] }}px)">
-          <view data-col="1" class="{{ index === selected[1] ? 'select-item' : '' }} cell" 
-            wx:for-index="index"
-            wx:for="{{dataList[1]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['months']}}" data-col="1" class="fixed-col">月</view>
-
-      <view wx:if="{{use['days']}}" data-col="2" class="col">
-        <view data-col="2" style="transform: translateY({{ transPos[2] }}px)">
-          <view data-col="2" class="{{ index === selected[2] ? 'select-item' : '' }} cell" 
-            wx:for-index="index" wx:for="{{dataList[2]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['days']}}" data-col="2" class="fixed-col">日</view>
-
-      <view wx:if="{{use['hours']}}" data-col="3" class="col">
-        <view data-col="3" style="transform: translateY({{ transPos[3] }}px)">
-          <view data-col="3" class="{{ index === selected[3] ? 'select-item' : '' }} cell" 
-            wx:for-index="index" wx:for="{{dataList[3]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['hours']}}" data-col="3" class="fixed-col">时</view>
-
-      <view wx:if="{{use['minutes']}}" data-col="4" class="col">
-        <view data-col="4" style="transform: translateY({{ transPos[4] }}px)">
-          <view data-col="4" class="{{ index === selected[4] ? 'select-item' : '' }} cell" 
-            wx:for-index="index" wx:for="{{dataList[4]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['minutes']}}" data-col="4" class="fixed-col">分</view>
-
-      <view wx:if="{{use['seconds']}}" data-col="5" class="col">
-        <view data-col="5" style="transform: translateY({{ transPos[5] }}px)">
-          <view data-col="5" class="{{ index === selected[5] ? 'select-item' : '' }} cell" 
-            wx:for-index="index" wx:for="{{dataList[5]}}" wx:key="*this">{{item}}</view>
-        </view>
-      </view>
-      <view wx:if="{{use['seconds']}}" data-col="5" class="fixed-col">秒</view>
-    </view>
-  </view>
+  </pop-manager>
 </view>
\ No newline at end of file
diff --git a/dist/datetime-picker/index.wxss b/dist/datetime-picker/index.wxss
index ecf5f216..fe180685 100644
--- a/dist/datetime-picker/index.wxss
+++ b/dist/datetime-picker/index.wxss
@@ -1,110 +1,53 @@
-.picker-view-column {
-  font-size: 14px;
-}
-.placeholder-class {
-  width: 100%;
-}
-
-.picker {
-  position: fixed;
-  bottom: -100px;
-  width: 100vw;
-  left: 0;
-  background: #fff;
-  z-index: 999;
-  display: flex;
-  flex-direction: column;
-  height: 0;
-  transition: height ease-in 0.3s;
-}
-.picker-view .picker {
-  position: relative;
-  bottom: auto;
-  left: auto;
-  width: 100%;
-  z-index: auto;
-}
 .picker-visible {
   height: 236px;
   bottom: 0;
 }
-.picker-view .picker-visible {
-  height: 200px;
+
+picker-view-column.year-view-column {
+  width: 50px;
+  flex: 2;
 }
-.picker-mask {
-  position: fixed;
+picker-view-column {
+  width: 30px;
+  text-align: center;
+}
+.hidden {
+  display: none;
+}
+.view-column-tip {
+  height: 235px;
+  line-height: 235px;
+  margin: 0 5px;
+}
+
+.picker {
+  width: 100vw;
+  height: 100vh;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: -1;
-}
-.picker-mask.show {
-  bottom: 0;  
-  z-index: 998; 
+  z-index: 12;
 }
+
 .picker .picker-action {
   height: 36px;
-  border-bottom: 1rpx solid #e5e5e5;
+  bottom: 235px;
+  padding: 0 15px;
+  width: 100%;
   display: flex;
   align-items: center;
+  position: absolute;
+  background: #fff;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #e5e5e5;
   justify-content: space-between;
-  padding: 0 15px;
 }
 .picker-action view:last-child {
   color: #1aad16;
 }
-.picker .picker-cols {
-  display: flex;
-  flex: 1;
-  margin: 10px 5px;
-  box-sizing: border-box;
-  position: relative;
-  overflow: hidden;
-  height: 180px;
-  font-size: 16px;
-}
-.picker-cols .fixed-col {
-  color: #999;
-  margin-left: 5px;
-  height:100%;
-  line-height:180px;
-}
-.picker-cols .col {
-  transform-origin: center;
-  font-size: 14px;
-}
-.picker-cols .col .select-item {
-  color: #333;
-  font-size: 16px;
-}
-.picker-cols .col {
-  flex: 1;
-  text-align: right;
-  color: #aaa;
-  height: 180px;
-  position: relative;
-  padding-top: 79px;
-}
-.picker-cols .col > view {
-  transition: transform 0.0003s;
-}
-.picker-cols .col .cell {
-  height: 36px;
-}
-.picker-cols::after, .picker-cols::before {
-  content: '';
+
+.picker picker-view {
   position: absolute;
-  height: 72px;
-  width: calc(100% - 10px);
-  pointer-events: none;
-}
-.picker-cols::before {
-  top: 0;
-  border-bottom: 1rpx solid #e5e5e5;
-}
-.picker-cols::after {
   bottom: 0;
-  border-top: 1rpx solid #e5e5e5;  
-}
+  background: #fff;
+  width: 100vw;
+}
\ No newline at end of file
diff --git a/dist/datetime-picker/picker-view-column.wxml b/dist/datetime-picker/picker-view-column.wxml
new file mode 100644
index 00000000..9f407a04
--- /dev/null
+++ b/dist/datetime-picker/picker-view-column.wxml
@@ -0,0 +1,6 @@
+<template name="picker-view-column">
+  <picker-view-column class="{{ className }} {{ hidden && 'hidden'}}">
+    <view wx:for="{{ data }}" style="line-height: 50px" wx:key="*this">{{item}}</view>
+  </picker-view-column>
+  <view class="view-column-tip {{ hidden && 'hidden'}}">{{ tip }}</view>
+</template>
\ No newline at end of file
diff --git a/dist/datetime-picker/utils.js b/dist/datetime-picker/utils.js
new file mode 100644
index 00000000..d92fbf92
--- /dev/null
+++ b/dist/datetime-picker/utils.js
@@ -0,0 +1,124 @@
+'use strict';
+
+function partStartWithZero(num, strlen) {
+  var zeros = '';
+  while (zeros.length < strlen) {
+    zeros += '0';
+  }
+  return (zeros + num).slice(-strlen);
+}
+
+module.exports.genNumber = function genNumber(begin, end, strlen) {
+  var nums = [];
+  while (begin <= end) {
+    nums.push(partStartWithZero(begin, strlen));
+    begin++;
+  }
+  return nums;
+};
+
+module.exports.moment = function moment(date) {
+  var formatStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY:MM:DD';
+
+  if (!date && date !== 0) date = new Date();
+
+  date = new Date(date);
+  if (date.toString() === 'Invalid Date') throw new Error('Invalid Date');
+
+  var getDateValue = function getDateValue(method, fn) {
+    return fn ? fn(date['get' + method]()) : date['get' + method]();
+  };
+  var map = new Map();
+
+  map.set(/(Y+)/i, function () {
+    return getDateValue('FullYear', function (year) {
+      return (year + '').substr(4 - RegExp.$1.length);
+    });
+  });
+  map.set(/(M+)/, function () {
+    return getDateValue('Month', function (month) {
+      return partStartWithZero(month + 1, RegExp.$1.length);
+    });
+  });
+  map.set(/(D+)/i, function () {
+    return getDateValue('Date', function (date) {
+      return partStartWithZero(date, RegExp.$1.length);
+    });
+  });
+  map.set(/(H+)/i, function () {
+    return getDateValue('Hours', function (hour) {
+      return partStartWithZero(hour, RegExp.$1.length);
+    });
+  });
+  map.set(/(m+)/, function () {
+    return getDateValue('Minutes', function (minute) {
+      return partStartWithZero(minute, RegExp.$1.length);
+    });
+  });
+  map.set(/(s+)/, function () {
+    return getDateValue('Seconds', function (second) {
+      return partStartWithZero(second, RegExp.$1.length);
+    });
+  });
+
+  for (var _iterator = map, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+    var _ref2;
+
+    if (_isArray) {
+      if (_i >= _iterator.length) break;
+      _ref2 = _iterator[_i++];
+    } else {
+      _i = _iterator.next();
+      if (_i.done) break;
+      _ref2 = _i.value;
+    }
+
+    var _ref = _ref2;
+    var reg = _ref[0];
+    var fn = _ref[1];
+
+    if (reg.test(formatStr)) {
+      formatStr = formatStr.replace(RegExp.$1, fn.call(null));
+    }
+  }
+
+  return formatStr;
+};
+
+module.exports.iso2utc = function (string) {
+  var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
+  if (string) {
+    var d = string.match(new RegExp(regexp));
+    var offset = 0;
+    var date = new Date(d[1], 0, 1);
+
+    if (d[3]) {
+      date.setMonth(d[3] - 1);
+    }
+    if (d[5]) {
+      date.setDate(+d[5]);
+    }
+    if (d[7]) {
+      date.setHours(d[7]);
+    }
+    if (d[8]) {
+      date.setMinutes(d[8]);
+    }
+    if (d[10]) {
+      date.setSeconds(d[10]);
+    }
+    if (d[12]) {
+      date.setMilliseconds(Number("0." + d[12]) * 1000);
+    }
+    if (d[14]) {
+      offset = Number(d[16]) * 60 + Number(d[17]);
+      offset *= d[15] == '-' ? 1 : -1;
+    }
+
+    offset -= date.getTimezoneOffset();
+
+    return Number(date) + offset * 60 * 1000;
+  } else {
+    return string;
+  }
+};
\ No newline at end of file
diff --git a/dist/dialog/data.js b/dist/dialog/data.js
index 486faf13..d1fe5342 100644
--- a/dist/dialog/data.js
+++ b/dist/dialog/data.js
@@ -3,9 +3,6 @@
 module.exports = {
   // 标题
   title: '',
-  // 自定义 btn 列表
-  // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
-  buttons: [],
   // 内容
   message: ' ',
   // 选择节点
diff --git a/dist/dialog/dialog.js b/dist/dialog/dialog.js
index 35056a2b..e0ea26c5 100644
--- a/dist/dialog/dialog.js
+++ b/dist/dialog/dialog.js
@@ -5,7 +5,11 @@ var defaultData = require('./data');
 // options 使用参数
 // pageCtx 页面 page 上下文
 function Dialog(options, pageCtx) {
-  var parsedOptions = Object.assign({}, defaultData, options);
+  var parsedOptions = Object.assign({
+    // 自定义 btn 列表
+    // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
+    buttons: []
+  }, defaultData, options);
 
   var ctx = pageCtx;
   if (!ctx) {
diff --git a/dist/dialog/index.js b/dist/dialog/index.js
index 878bf93c..b4d79852 100644
--- a/dist/dialog/index.js
+++ b/dist/dialog/index.js
@@ -1,18 +1,39 @@
 'use strict';
 
-var defaultData = require('./data');
-
 var _f = function _f() {};
 
 Component({
   properties: {},
 
-  data: Object.assign({}, defaultData, {
+  data: {
+    // 标题
+    title: '',
+    // 自定义 btn 列表
+    // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
+    buttons: [],
+    // 内容
+    message: ' ',
+    // 选择节点
+    selector: '#zan-dialog',
+    // 按钮是否展示为纵向
+    buttonsShowVertical: false,
+    // 是否展示确定
+    showConfirmButton: true,
+    // 确认按钮文案
+    confirmButtonText: '确定',
+    // 确认按钮颜色
+    confirmButtonColor: '#3CC51F',
+    // 是否展示取消
+    showCancelButton: false,
+    // 取消按钮文案
+    cancelButtonText: '取消',
+    // 取消按钮颜色
+    cancelButtonColor: '#333',
     key: '',
     show: false,
     showCustomBtns: false,
     promiseFunc: {}
-  }),
+  },
 
   methods: {
     handleButtonClick: function handleButtonClick(e) {
diff --git a/dist/field/index.js b/dist/field/index.js
index da4adae1..40106d80 100644
--- a/dist/field/index.js
+++ b/dist/field/index.js
@@ -3,6 +3,14 @@
 Component({
   behaviors: ['wx://form-field'],
 
+  externalClasses: ['field-class'],
+
+  relations: {
+    '../cell-group/index': {
+      type: 'parent'
+    }
+  },
+
   properties: {
     title: String,
     type: {
@@ -10,12 +18,12 @@ Component({
       value: 'input'
     },
     disabled: Boolean,
+    focus: Boolean,
     inputType: {
       type: String,
       value: 'text'
     },
     placeholder: String,
-    focus: Boolean,
     mode: {
       type: String,
       value: 'normal'
@@ -28,6 +36,10 @@ Component({
     }
   },
 
+  data: {
+    showBorder: true
+  },
+
   methods: {
     handleFieldChange: function handleFieldChange(event) {
       var _event$detail = event.detail,
@@ -44,6 +56,16 @@ Component({
     },
     handleFieldBlur: function handleFieldBlur(event) {
       this.triggerEvent('blur', event);
+    },
+    updateIsLastElement: function updateIsLastElement(isLastField) {
+      var showBorder = true;
+      if (isLastField && this.data.mode === 'normal') {
+        showBorder = false;
+      }
+
+      this.setData({
+        showBorder: showBorder
+      });
     }
   }
 });
\ No newline at end of file
diff --git a/dist/field/index.json b/dist/field/index.json
index 32640e0d..da538052 100644
--- a/dist/field/index.json
+++ b/dist/field/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "zan-cell": "../cell/index"
+  }
 }
\ No newline at end of file
diff --git a/dist/field/index.wxml b/dist/field/index.wxml
index c82854ab..558e7b3c 100644
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@@ -1,5 +1,9 @@
-<view class="zan-cell zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }}">
+<zan-cell
+  class="field-class zan-field {{ error ? 'zan-field--error' : '' }} {{ mode === 'wrapped' ? 'zan-field--wrapped' : '' }} {{ !showBorder ? 'zan-field--no-border' : '' }}"
+  cell-class="zan-cell--field"
+>
   <view
+    slot="icon"
     wx:if="{{ title }}"
     class="zan-cell__hd zan-field__title">
     {{ title }}
@@ -32,4 +36,4 @@
     bindfocus="handleFieldFocus"
     bindblur="handleFieldBlur"
   />
-</view>
+</zan-cell>
diff --git a/dist/field/index.wxss b/dist/field/index.wxss
index 4a07fc70..8dbd0d67 100644
--- a/dist/field/index.wxss
+++ b/dist/field/index.wxss
@@ -1 +1 @@
-.zan-cell{position:relative;padding:12px 15px;display:flex;align-items:center;line-height:1.4;background-color:#fff;font-size:14px}.zan-cell::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-cell .zan-cell__icon{margin-right:5px}.zan-cell .zan-cell__icon:empty{display:none}.zan-cell__bd{flex:1}.zan-cell__text{line-height:24px;font-size:14px}.zan-cell__desc{line-height:1.2;font-size:12px;color:#666}.zan-cell__ft{position:relative;text-align:right;color:#666}.zan-cell__no-pading{padding:0}.zan-cell__no-pading .zan-cell__bd_padding{padding:12px 0 12px 15px}.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{height:26px}.zan-cell__no-pading .zan-cell__ft_padding{padding:12px 15px 12px 0}.zan-cell.last-cell::after{display:none}.zan-cell--access .zan-cell__ft{padding-right:13px}.zan-cell--access .zan-cell__ft::after{position:absolute;top:50%;right:2px;content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8c8;border-style:solid;-webkit-transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0);transform:translateY(-50%) matrix(.71,.71,-.71,.71,0,0)}.zan-cell--switch{padding-top:6px;padding-bottom:6px}.zan-field{padding:7px 15px;color:#333}.zan-field--wrapped{margin:10px 15px;background-color:#fff}.zan-field--wrapped::after{left:0;border-width:1px;border-radius:4px}.zan-field.zan-field--wrapped::after{display:block}.zan-field--error{color:#f40}.zan-field--wrapped.zan-field--error::after{border-color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right}
\ No newline at end of file
+.zan-field{display:block;position:relative;color:#333}.zan-field::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e5e5e5;border-bottom-width:1px;left:15px;right:0}.zan-field--no-border::after{border-bottom-width:0}.zan-cell--field{padding:7px 15px}.zan-field--wrapped{margin:10px 15px;background-color:#fff}.zan-field--wrapped::after{left:0;border-width:1px;border-radius:4px}.zan-field--wrapped::after{display:block}.zan-field--error{color:#f40}.zan-field--wrapped.zan-field--error::after{border-color:#f40}.zan-field__title{color:#333;min-width:65px;padding-right:10px}.zan-field__input{flex:1;line-height:1.6;padding:4px 0;min-height:22px;height:auto;font-size:14px}.zan-field__placeholder{font-size:14px}.zan-field__input--right{text-align:right}
\ No newline at end of file
diff --git a/dist/noticebar/index.js b/dist/noticebar/index.js
index 30f069b8..dc844b7f 100644
--- a/dist/noticebar/index.js
+++ b/dist/noticebar/index.js
@@ -8,7 +8,10 @@ Component({
   properties: {
     text: {
       type: String,
-      value: ''
+      value: '',
+      observer: function observer(newVal) {
+        this.setData({}, this._init);
+      }
     },
     mode: {
       type: String,
@@ -73,9 +76,6 @@ Component({
 
     timer && clearTimeout(timer);
   },
-  ready: function ready() {
-    this._init();
-  },
 
 
   methods: {
@@ -91,7 +91,7 @@ Component({
 
       wx.createSelectorQuery().in(this).select('.zan-noticebar__content').boundingClientRect(function (rect) {
         if (!rect || !rect.width) {
-          throw new Error('页面缺少 noticebar 元素');
+          return;
         }
         _this.setData({
           width: rect.width
diff --git a/dist/stepper/index.js b/dist/stepper/index.js
index ca424182..e0cbb608 100644
--- a/dist/stepper/index.js
+++ b/dist/stepper/index.js
@@ -6,7 +6,10 @@ var VERY_LARGE_NUMBER = 2147483647;
 
 Component({
   properties: {
-    size: String,
+    size: {
+      type: String,
+      value: 'middle'
+    },
     stepper: {
       type: Number,
       value: 1
@@ -42,6 +45,8 @@ Component({
         stepper += step;
       }
 
+      if (stepper < this.data.min || stepper > this.data.max) return null;
+
       this.triggerEvent('change', stepper);
       this.triggerEvent(type);
     },
diff --git a/dist/stepper/index.wxml b/dist/stepper/index.wxml
index c3d2c6c0..8e3b9fe8 100644
--- a/dist/stepper/index.wxml
+++ b/dist/stepper/index.wxml
@@ -1,4 +1,4 @@
-<view class="zan-stepper {{ size === 'small' ? 'zan-stepper--small' : '' }}">
+<view class="zan-stepper zan-stepper--{{ size }}">
   <view
     class="zan-stepper__minus {{ stepper <= min ? 'zan-stepper--disabled' : '' }}"
     data-disabled="{{ stepper <= min }}"
diff --git a/dist/stepper/index.wxss b/dist/stepper/index.wxss
index c4345c03..9f960cba 100644
--- a/dist/stepper/index.wxss
+++ b/dist/stepper/index.wxss
@@ -1 +1 @@
-.zan-stepper{color:#666}.zan-stepper view{display:inline-block;line-height:20px;padding:5px 0;text-align:center;min-width:40px;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-stepper .zan-stepper__minus{border-right:none;border-radius:2px 0 0 2px}.zan-stepper .zan-stepper__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;height:30px;width:40px;min-height:auto;font-size:12px;line-height:30px}.zan-stepper .zan-stepper__plus{border-left:none;border-radius:0 2px 2px 0}.zan-stepper .zan-stepper--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-stepper--small view{min-width:36px;line-height:18px}.zan-stepper--small .zan-stepper__text{width:36px;line-height:28px;height:28px}
\ No newline at end of file
+.zan-stepper{color:#666}.zan-stepper view{display:inline-block;padding:5px 0;text-align:center;box-sizing:border-box;vertical-align:middle;font-size:12px;border:1rpx solid #999}.zan-stepper .zan-stepper__minus{border-right:none;border-radius:2px 0 0 2px}.zan-stepper .zan-stepper__text{border:1rpx solid #999;display:inline-block;text-align:center;vertical-align:middle;min-height:auto;font-size:12px}.zan-stepper .zan-stepper__plus{border-left:none;border-radius:0 2px 2px 0}.zan-stepper .zan-stepper--disabled{background:#f8f8f8;color:#bbb;border-color:#e8e8e8}.zan-stepper--small view{min-width:36px;line-height:18px}.zan-stepper--small .zan-stepper__text{width:36px;line-height:28px;height:28px}.zan-stepper--middle view{min-width:40px;line-height:20px}.zan-stepper--middle .zan-stepper__text{width:40px;line-height:30px;height:30px}.zan-stepper--large view{min-width:44px;line-height:22px}.zan-stepper--large .zan-stepper__text{width:44px;line-height:32px;height:32px}
\ No newline at end of file
diff --git a/dist/steps/index.js b/dist/steps/index.js
index 7af57e52..fb846ab6 100644
--- a/dist/steps/index.js
+++ b/dist/steps/index.js
@@ -1,6 +1,7 @@
 'use strict';
 
 Component({
+  externalClasses: ['steps-class', 'icon-class', 'title-class', 'desc-class'],
   properties: {
     type: {
       type: String,
diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
index cdcfbafa..ee707ed6 100644
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@@ -1,11 +1,11 @@
-<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
+<view class="steps-class zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
   <view
     wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
     class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
   >
-    <view class="zan-steps__title">{{ step.text }}</view>
-    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
-    <view class="zan-steps__icons">
+    <view class="zan-steps__title title-class">{{ step.text }}</view>
+    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc desc-class">{{ step.desc }}</view>
+    <view class="zan-steps__icons icon-class">
       <view class="zan-steps__circle"></view>
     </view>
     <view class="zan-steps__line"></view>
diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss
index 50977e91..827f3368 100644
--- a/dist/steps/index.wxss
+++ b/dist/steps/index.wxss
@@ -1 +1 @@
-.zan-steps--steps.zan-steps--5 .zan-steps__step{width:25%}.zan-steps--steps.zan-steps--4 .zan-steps__step{width:33%}.zan-steps--steps.zan-steps--3 .zan-steps__step{width:50%}.zan-steps--steps .zan-steps__step{position:relative;float:left;padding-bottom:25px;color:#b1b1b1;width:100%}.zan-steps--steps .zan-steps__title{-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:10px;text-align:center}.zan-steps--steps .zan-steps__icons{position:absolute;top:30px;left:-10px;padding:0 8px;background-color:#fff;z-index:10}.zan-steps--steps .zan-steps__circle{display:block;position:relative;width:5px;height:5px;background-color:#e5e5e5;border-radius:50%}.zan-steps--steps .zan-steps__line{position:absolute;left:0;top:32px;width:100%;height:1px;background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--done{color:#333}.zan-steps--steps .zan-steps__step--done .zan-steps__line{background-color:#06bf04}.zan-steps--steps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--steps .zan-steps__step--cur .zan-steps__icons{top:25px;left:-14px}.zan-steps--steps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background-image:url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px}.zan-steps--steps .zan-steps__step--cur .zan-steps__line{background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--first-child .zan-steps__title{margin-left:0;-webkit-transform:none;transform:none;text-align:left}.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons{left:-7px}.zan-steps--steps .zan-steps__step--last-child{position:absolute;right:0;top:0;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__title{-webkit-transform:none;transform:none;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons{left:auto;right:-6px}.zan-steps--steps .zan-steps__step--last-child .zan-steps__line{display:none}.zan-steps--steps .zan-steps__step--db-title{min-height:29px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__line{top:45px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons{top:43px}.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons{top:39px}.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#cacaca;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps{position:relative}
\ No newline at end of file
+.zan-steps--steps.zan-steps--5 .zan-steps__step{width:25%}.zan-steps--steps.zan-steps--4 .zan-steps__step{width:33%}.zan-steps--steps.zan-steps--3 .zan-steps__step{width:50%}.zan-steps--steps .zan-steps__step{position:relative;float:left;padding-bottom:25px;color:#b1b1b1;width:100%}.zan-steps--steps .zan-steps__title{-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:10px;text-align:center}.zan-steps--steps .zan-steps__icons{position:absolute;top:30px;left:-10px;padding:0 8px;background-color:#fff;z-index:10}.zan-steps--steps .zan-steps__circle{display:block;position:relative;width:5px;height:5px;background-color:#e5e5e5;border-radius:50%}.zan-steps--steps .zan-steps__line{position:absolute;left:0;top:32px;width:100%;height:1px;background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--done{color:#333}.zan-steps--steps .zan-steps__step--done .zan-steps__line{background-color:#06bf04}.zan-steps--steps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--steps .zan-steps__step--cur .zan-steps__icons{top:25px;left:-14px}.zan-steps--steps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background-image:url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px}.zan-steps--steps .zan-steps__step--cur .zan-steps__line{background-color:#e5e5e5}.zan-steps--steps .zan-steps__step--first-child .zan-steps__title{margin-left:0;-webkit-transform:none;transform:none;text-align:left}.zan-steps--steps .zan-steps__step--first-child .zan-steps__icons{left:-7px}.zan-steps--steps .zan-steps__step--last-child{position:absolute;right:0;top:0;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__title{-webkit-transform:none;transform:none;text-align:right}.zan-steps--steps .zan-steps__step--last-child .zan-steps__icons{left:auto;right:-6px}.zan-steps--steps .zan-steps__step--last-child .zan-steps__line{display:none}.zan-steps--steps .zan-steps__step--db-title{min-height:29px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__line{top:45px}.zan-steps--steps .zan-steps__step--db-title .zan-steps__icons{top:43px}.zan-steps--steps .zan-steps__step--db-title.zan-steps__step--cur .zan-steps__icons{top:39px}.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#e5e5e5;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps{position:relative}
\ No newline at end of file
diff --git a/dist/steps/wxss/vstep.wxss b/dist/steps/wxss/vstep.wxss
index 90aeee5b..6661d860 100644
--- a/dist/steps/wxss/vstep.wxss
+++ b/dist/steps/wxss/vstep.wxss
@@ -1 +1 @@
-.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#cacaca;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}
\ No newline at end of file
+.zan-steps--vsteps{color:#999;font-size:14px}.zan-steps--vsteps .zan-steps__step{position:relative;padding:15px 0}.zan-steps--vsteps .zan-steps__step--done{color:#4b0}.zan-steps--vsteps .zan-steps__line{position:absolute;top:0;bottom:0;left:7px;width:1px;background-color:#e5e5e5}.zan-steps--vsteps .zan-steps__title{display:inline-block;line-height:20px;padding-left:27px}.zan-steps--vsteps .zan-steps__title--desc{padding-left:3px}.zan-steps--vsteps .zan-steps__icons{position:absolute;left:7px;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2;padding:3px 0;background-color:#fff}.zan-steps--vsteps .zan-steps__circle{width:5px;height:5px;background-color:#e5e5e5;border-radius:10px}.zan-steps--vsteps .zan-steps__step--done .zan-steps__circle{width:5px;height:5px;background-color:#09bb07}.zan-steps--vsteps .zan-steps__step--cur .zan-steps__circle{width:13px;height:13px;background:transparent url(https://b.yzcdn.cn/v2/image/wap/success_small@2x.png);background-size:13px 13px;border-radius:0}.zan-steps--vsteps .zan-steps__icon--active{width:13px;height:13px}.zan-steps--vsteps .zan-steps__step--first-child .zan-steps__title::before{content:'';position:absolute;top:0;bottom:50%;left:7px;width:1px;background-color:#fff;z-index:1}.zan-steps--vsteps .zan-steps__step--last-child .zan-steps__title::after{content:'';position:absolute;top:50%;bottom:0;left:7px;width:1px;background-color:#fff;z-index:1}
\ No newline at end of file
diff --git a/dist/toptips/index.js b/dist/toptips/index.js
index cde6fbeb..23a453e0 100644
--- a/dist/toptips/index.js
+++ b/dist/toptips/index.js
@@ -46,35 +46,9 @@ Component({
       this._timer = clearTimeout(this._timer);
 
       this.setData({
-        isShow: false
+        isShow: false,
+        backgroundColor: BG_COLOR
       });
     }
   }
-});
-
-function Toptips() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-  var pages = getCurrentPages();
-  var ctx = pages[pages.length - 1];
-  var defaultOptions = {
-    selector: '#zan-toptips',
-    duration: 3000
-  };
-
-  options = Object.assign(defaultOptions, parseParam(options));
-
-  var $toptips = ctx.selectComponent(options.selector);
-  delete options.selector;
-
-  $toptips.setData(Object.assign({}, options));
-  $toptips && $toptips.show();
-}
-
-function parseParam() {
-  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-  return typeof params === 'object' ? params : { content: params };
-}
-
-module.exports = Toptips;
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/dist/toptips/index.wxml b/dist/toptips/index.wxml
index e293b276..bf1757cd 100644
--- a/dist/toptips/index.wxml
+++ b/dist/toptips/index.wxml
@@ -1 +1 @@
-<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}">{{ content }}</view>
+<view class="zan-toptips {{ isShow ? 'zan-toptips--show' : '' }}" style="background-color:{{ backgroundColor }}">{{ content }}</view>
diff --git a/dist/toptips/toptips.js b/dist/toptips/toptips.js
new file mode 100644
index 00000000..319bec94
--- /dev/null
+++ b/dist/toptips/toptips.js
@@ -0,0 +1,28 @@
+'use strict';
+
+function Toptips() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var pages = getCurrentPages();
+  var ctx = pages[pages.length - 1];
+  var defaultOptions = {
+    selector: '#zan-toptips',
+    duration: 3000
+  };
+
+  options = Object.assign(defaultOptions, parseParam(options));
+
+  var $toptips = ctx.selectComponent(options.selector);
+  delete options.selector;
+
+  $toptips.setData(Object.assign({}, options));
+  $toptips && $toptips.show();
+}
+
+function parseParam() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  return typeof params === 'object' ? params : { content: params };
+}
+
+module.exports = Toptips;
\ No newline at end of file