example示例优化 & 部分样式修改 (#3)

* example

* 优化example文档

* form 增加上边框

* example/form优化

dist/form/index.wxss

@@ -1,5 +1,6 @@
 .zui-form {
   background-color: #fff;
+  border-top: 1rpx solid #e5e5e5;
   border-bottom: 1rpx solid #e5e5e5;
 }
 

example/form/index.js

@@ -1,13 +1,20 @@
-var app = getApp()
 
 Page({
   data: {
+    area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
+    areaIndex: 0
   },
 
   onLoad: function () {
 
   },
 
-  onShow: function() {
+  onShow: function () {
   },
-})
+
+  onAreaChange: function (e) {
+    this.setData({
+      areaIndex: e.detail.value
+    });
+  }
+});

example/form/index.wxml

@@ -10,7 +10,7 @@
         placeholder="名字"
       />
     </view>
-    <view class="zui-cell zui-form__item zui-cell--last-child">
+    <view class="zui-cell zui-form__item">
       <text class="zui-form__title">联系电话</text>
       <input
         class="zui-form__input zui-cell__bd"
@@ -19,6 +19,19 @@
         placeholder="手机或固定电话"
       />
     </view>
+    <view class="zui-cell zui-form__item zui-cell--last-child">
+      <text class="zui-form__title">选择区域</text>
+      <view class="zui-form__input zui-cell__bd">
+        <picker
+          mode="selector"
+          range="{{ area }}"
+          value="{{ areaIndex }}"
+          bindchange="onAreaChange"
+        >
+          {{ area[areaIndex] }}
+        </picker>
+      </view>
+    </view>
   </view>
 
 </view>