Merge pull request #296 from ant-mini-program/verion/0.4.32

Verion/0.4.32

Author: oimz1989

CHANGELOG.md

@@ -1,4 +1,7 @@
 ## 0.4.31
+
+`2019-08-28`
+
 - **Bug Fix**
   - package.json 调整
 

components/calendar/index.axml

@@ -1,12 +1,18 @@
 <view class="am-calendar {{className}}" a:if="{{dates.length > 0}}">
   <view class="am-calendar-months">
+    <view class="am-calendar-prev-month" onTap="onPrevYearTap" a:if="{{haveYear}}">
+      <view class="am-calendar-arrow am-calendar-arrow_year"></view>
+    </view>
     <view class="am-calendar-prev-month" onTap="onPrevMonthTap">
       <view class="am-calendar-arrow"></view>
     </view>
     <view class="am-calendar-selected-month">{{selectedYear}}年{{selectedMonth + 1}}月</view>
     <view class="am-calendar-next-month" onTap="onNextMonthTap">
       <view class="am-calendar-arrow next"></view>
     </view>
+    <view class="am-calendar-next-month" onTap="onNextYearTap" a:if="{{haveYear}}">
+      <view class="am-calendar-arrow am-calendar-arrow_year next"></view>
+    </view>
   </view>
   <view class="am-calendar-days">
     <block a:for="{{['日', '一', '二', '三', '四', '五', '六']}}">
@@ -38,7 +44,7 @@
             >{{item.date}}</view>
             <view class="am-calendar-tag" style="{{
               color: item.isSelected || item.isMiddle || item.isStart || item.isEnd ? '#fff' : (item.disable ? '#999' : item.color)
-            }}">{{item.disable ? 'disable' : item.tag}}</view>
+            }}">{{item.disable ? '' : item.tag}}</view>
           </view>
         </block>
       </view>

components/calendar/index.less

@@ -32,6 +32,10 @@
     background-size: 8px 14px;
     background-position: left center;
     background-repeat: no-repeat;
+    &_year {
+      width: 13px;
+      background-repeat: repeat-x;
+    }
   }
 
   &-arrow.next {

components/calendar/index.md

@@ -10,6 +10,7 @@
 | 属性名 | 描述 | 类型 | 默认值 | 必选 |
 | ---- | ---- | ---- | ---- | ---- |
 | type | 选择类型 `single`: 单日 `range`: 日期区间 | String | single | false
+| haveYear | 是否展示年份控制箭头 | Boolean | false | false
 | tagData | 标记数据，其中包括日期`date`，标记`tag`，是否禁用`disable`，标记颜色`tagColor`，tagColor有4个可选值，1.#f5a911，2.#e8541e 3.#07a89b 4.#108ee9，5.#b5b5b5 | Array<date, tag, tagColor> | | false
 | onSelect | 选择区间回调 | ([startDate, endDate]) => void | | false
 | onMonthChange | 点击切换月份时回调，带两个参数currentMonth切换后月份和prevMonth切换前月份 | (currentMonth, prevMonth) => void | | false |
@@ -29,21 +30,32 @@
 ```html
 <view>
   <calendar
-    type="single"
+    type="range"
+    haveYear="{{true}}"
     tagData="{{tagData}}"
-    onSelect="handleSelect" />
+    onSelect="handleSelect"
+    onMonthChange="onMonthChange"
+    onYearChange="onYearChange"
+    onSelectHasDisableDate="onSelectHasDisableDate" />
 </view>
 ```
 
 ```javascript
 Page({
   data: {
     tagData: [
-      { date: '2018-05-14', tag: '还房贷', tagColor: 5 },
-      { date: '2018-05-28', tag: '公积金', tagColor: 2 },
+      { date: '2019-09-14', tag: '还房贷', tagColor: 5 },
+      { date: '2019-09-28', tag: '公积金', tagColor: 2 },
+      { date: '2019-09-18', tag: 'xx', disable: true },
     ],
   },
   handleSelect() {},
   onMonthChange() {},
+  onYearChange() {},
+  onSelectHasDisableDate() {
+    my.alert({
+      content: 'SelectHasDisableDate',
+    });
+  },
 });
 ```

components/calendar/index.ts

@@ -48,6 +48,7 @@ Component({
     className: '',
     tagData: [],
     type: 'single',
+    haveYear: false,
   },
   didMount() {
     this.tapTimes = 1;
@@ -83,6 +84,40 @@ Component({
     });
   },
   methods: {
+    onPrevYearTap() {
+      const { selectedMonth, selectedYear } = this.data;
+      let year = selectedYear;
+      const month = selectedMonth;
+
+      year = selectedYear - 1;
+
+      if (this.props.onYearChange) {
+        this.props.onYearChange(year, selectedYear);
+      }
+
+      this.setData({
+        selectedYear: year,
+      });
+
+      this.refreshdates(month, year);
+    },
+    onNextYearTap() {
+      const { selectedMonth, selectedYear } = this.data;
+      let year = selectedYear;
+      const month = selectedMonth;
+
+      year = selectedYear + 1;
+
+      if (this.props.onYearChange) {
+        this.props.onYearChange(year, selectedYear);
+      }
+
+      this.setData({
+        selectedYear: year,
+      });
+
+      this.refreshdates(month, year);
+    },
     onPrevMonthTap() {
       const { selectedMonth, selectedYear } = this.data;
       let year = selectedYear;
@@ -352,7 +387,7 @@ Component({
               const dateObj = dates[i][j];
               if (dateObj.year === year && dateObj.month === month && dateObj.date === date) {
                 if (dateObj.disable) {
-                  console.log(1111);
+                  // console.log(1111);
                   isDisable = true;
                   dateObj.isSelected = false;
                 } else {

components/grid/index.less

@@ -48,15 +48,6 @@
 	color: @color_2;
 	font-size: 12px;
 }
-.am-grid-no-line {
-	.am-grid-item {
-		padding-top: 110px;
-	}
-	.am-grid-border {
-		border-right: none;
-		border-bottom: none;
-	}
-}
 
 .am-grid-2 {
 	.am-grid-item-wrapper {
@@ -131,6 +122,16 @@
 	}
 }
 
+.am-grid-no-line {
+	.am-grid-item {
+		padding-top: 110px;
+		.am-grid-border {
+			border-right: 0 none;
+			border-bottom: 0 none;
+		}
+	}
+}
+
 .am-grid-5 {
 	padding-top: 6px;
   padding-bottom: 7px;

components/input-item/index.md

@@ -1,11 +1,12 @@
-## InputItem 文本输入
-
 文本输入。
 
-扫码体验：
-
+## 扫码体验
 <img src="https://gw.alipayobjects.com/zos/rmsportal/HoUOLnPEOaymuHlbeyqR.jpeg" width="154" height="190" />
 
+## 效果示例
+![输入框.png](https://intranetproxy.alipay.com/skylark/lark/0/2019/png/188518/1564389321807-3fdc73ec-f8c4-454b-aa2b-69121edd0d25.png) 
+
+## 属性
 | 属性名 | 描述 | 类型 | 默认值 |
 | ---- |----|----|----|
 | className | 自定义的class | String| '' |
@@ -14,7 +15,7 @@
 | last | 是否最后一行 | Boolean | false |
 | value | 初始内容 | String | '' |
 | name | 组件名字，用于表单提交获取数据 | String | '' |
-| type | input 的类型，有效值：`text`, `number`, `idcard`, `digit` | String | text |
+| type | input 的类型，有效值：`text`, `number`, `idcard`, `digit`  | String | text |
 | password | 是否是密码类型 | Boolean | false |
 | placeholder | 占位符 | String | '' |
 | placeholderStyle | 指定 placeholder 的样式 | String | '' |
@@ -29,15 +30,24 @@
 | onBlur | 失去焦点时触发 | (e: Object) => void |  |
 | onClear | 点击清除icon时触发 | () => void |  |
 
+### type 属性值介绍
+* `text`： 字符输入框
+* `number`： 纯数字输入框（ 0-9 之间的数字）
+* `idcard`：身份证输入框（ 0-9 之间的数字，以及字符 x）
+* `digit`：数字输入框，（ 0-9 之间的数字，以及小数点 . 字符，可用于含有小数的数字）
+
+**注**：`type` 的属性值影响的是真机中的键盘类型，在模拟器中并不一定会有效果。
+
 ## slots
 
 | slotname | 说明 |
 | ---- | ---- |
 | extra | 可选，用于渲染input-item项右边说明 |
 
-## 示例
+## 示例代码
 
 ```json
+// API-DEMO page/component/input-item/input-item.json
 {
   "defaultTitle": "小程序AntUI组件库",
   "usingComponents": {
@@ -49,7 +59,8 @@
 }
 ```
 
-```axml
+```html
+<!-- API-DEMO page/component/input-item/input-item.axml -->
 <view>
   <view style="margin-top: 10px;" />
   <list>
@@ -108,6 +119,7 @@
 ```
 
 ```javascript
+// API-DEMO page/component/input-item/input-item.js
 const banks = ['网商银行', '建设银行', '工商银行', '浦发银行'];
 
 Page({
@@ -159,6 +171,7 @@ Page({
 ```
 
 ```css
+/* API-DEMO page/component/input-item/input-item.acss */
 .extra {
   background-image: url('https://gw.alipayobjects.com/zos/rmsportal/dOfSJfWQvYdvsZiJStvg.svg');
   background-size: contain;
@@ -169,4 +182,4 @@ Page({
   width: 20px;
   padding-left: 10px;
 }
-```
+```

components/list/index.axml

@@ -5,6 +5,8 @@
   <view class="am-list-body">
     <slot />
   </view>
+  <view class="am-list-load-more" a:if="{{loadMore === 'load'}}"><icon type="loading" size="16"/><text class="am-list-load-more-txt">{{loadContent[0]?loadContent[0]:''}}</text></view>
+  <view class="am-list-load-over" a:if="{{loadMore === 'over'}}">{{loadContent[1]?loadContent[1]:''}}</view>
   <view class="am-list-footer" a:if="{{$slots.footer}}">
     <slot name="footer" />
   </view>

components/list/index.less

@@ -16,4 +16,23 @@
   &-footer {
     padding: 8px 16px 16px 16px;
   }
+  &-load-more {
+    text-align: center;
+    background: #fff;
+    padding: 10px 16px;
+    font-size: 15px;
+    line-height: 1.4;
+    color: @color-text-title;
+    &-txt {
+      padding: 0 10px;
+    }
+  }
+  &-load-over {
+    display: block;
+    padding: 10px 16px;
+    font-size: 10px;
+    text-align: center;
+    color: #ccc;
+    text-shadow: 1px 1px #f0f0f0;
+  }
 }

components/list/index.md

@@ -11,6 +11,35 @@
 | 属性名 | 描述 | 类型 | 默认值 |
 | ---- | ---- | ---- | ---- |
 | className | 自定义class | String| |
+| loadMore | 显示加载更多 item。`load`：显示加载更多；`over`：显示加载完成无更多 | String| |
+| loadContent | 需结合 `loadMore` 属性使用，用于文案展示 | Array | ['加载更多...','-- 数据加载完了 --'] |
+
+### loadMore 使用介绍
+当需要使用无限循环列表时，可将 `list` 组件放置入到 [`scroll-view`](https://docs.alipay.com/mini/component/scroll-view) 中，根据需求对 [`scroll-view`](https://docs.alipay.com/mini/component/scroll-view) 添加相对应的属性，比如：
+```xml
+<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower" enable-back-to-top="true">
+  <list loadMore="{{loadMore}}" loadContent="{{loadContent}}">
+    <list-item>...</list-item>
+  </list>
+</scroll-view>
+```
+```javascript
+Page({
+  data: {
+    loadMore: '',
+    loadContent: [
+      '马不停蹄加载更多数据中...',
+      '-- 已经到底了，加不了咯 --',
+    ],
+  },
+  onScrollToLower() {
+    // 根据实际数据加载情况设定 loadMore 的值即可，分别为 load 和 over
+    this.setData({
+      loadMore: 'load',
+    })
+  },
+})
+```
 
 ### slots