release version v1.1.7

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.1.7
+`2020-10-15`
+* **Fixed**
+  * tabs 组件iOS样式兼容
+  * notice组件中didUpdate判断机制优化
+  * vtabs滚动与点击tab 的同步
+* **Feature**
+  * steps 组件可修改步骤的 icon 的类型以及颜色
+  * footer 组件支持自定义处理链接点击事件 ([#45](https://github.com/Alibaba-mp/mini-ali-ui/pull/45))
+
 ## 1.1.6
 `2020-09-24`
 * **Fixed**

demo/pages/footer/index.axml

@@ -21,12 +21,12 @@
   type="{{footerInfo5.type}}" 
   content="{{footerInfo5.content}}"
   extend="{{footerInfo5.extend}}"
-  onBrandTap="brandClick"
 />
 <footer 
   type="{{footerInfo6.type}}" 
   content="{{footerInfo6.content}}"
   extend="{{footerInfo6.extend}}"
+  onLinkTap="linkTap"
 />
 <footer 
   type="{{footerInfo7.type}}" 

demo/pages/footer/index.js

@@ -83,4 +83,10 @@ Page({
       content: '这个品牌 logo 没有链接，可通过 js 自定义点击事件。',
     });
   },
+  linkTap(e) {
+    my.alert({
+      title: 'onLinkTap 回调',
+      content: e,
+    });
+  },
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-ali-ui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "小程序版AntUI",
   "repository": {
     "type": "git",

src/footer/index.md

@@ -77,12 +77,12 @@
   type="{{footerInfo5.type}}" 
   content="{{footerInfo5.content}}"
   extend="{{footerInfo5.extend}}"
-  onBrandTap="brandClick"
 />
 <footer 
   type="{{footerInfo6.type}}" 
   content="{{footerInfo6.content}}"
   extend="{{footerInfo6.extend}}"
+  onLinkTap="linkTap"
 />
 <footer 
   type="{{footerInfo7.type}}" 
@@ -196,5 +196,11 @@ Page({
       content: '这个品牌 logo 没有链接，可通过 js 自定义点击事件。',
     });
   },
+  linkTap(e) {
+    my.alert({
+      title: 'onLinkTap 回调',
+      content: e,
+    });
+  },
 });
 ```

src/footer/index.ts

@@ -75,7 +75,7 @@ Component({
       }
     },
     onLinkTap(e) {
-      const item = e.currentTarget.dataset.item;
+      const { item } = e.currentTarget.dataset;
       const { onLinkTap } = this.props;
       onLinkTap(item);
     },

src/notice/index.ts

@@ -54,11 +54,11 @@ Component({
   },
 
   didUpdate() {
-    if (this.props.type === 'active' && this.props.transparent) {
+    if (this.props.type === 'active' && this.props.transparent && this.data.showShadow === true) {
       this.setData({
         showShadow: false,
       });
-    } else {
+    } else if (this.data.showShadow === false) {
       this.setData({
         showShadow: true,
       });
@@ -72,7 +72,7 @@ Component({
       this._startAnimation();
     } else {
       // 当通过脚本切换 show 的值时（true or false），导致跑马灯动画效果失效的 bug 处理
-      if (!this.props.show) {
+      if (!this.props.show && this.data.marqueeStyle !== '') {
         this.setData({ marqueeStyle: '' });
       }
       this._measureText(this.startMarquee.bind(this));
@@ -95,7 +95,9 @@ Component({
       const { leading = 500 } = this.props.marqueeProps;
       const { duration, overflowWidth } = this.data;
       const marqueeStyle = `transform: translateX(${-overflowWidth}px); transition: ${duration}s all linear ${typeof leading === 'number' ? `${leading / 1000}s` : '0s'};`;
-      this.setData({ marqueeStyle });
+      if (this.data.marqueeStyle !== marqueeStyle) {
+        this.setData({ marqueeStyle });
+      }
     },
 
     onTransitionEnd() {

src/steps/index.axml

@@ -3,10 +3,13 @@
   <view class="am-hor-step" a:for="{{items}}" style="{{width: 100 / (items.length - 1) + '%'}}">
     <view class="am-hor-step-line
             {{index < activeIndex - 1 ? 'is-active' : ''}}
-            {{index >= items.length - 1 ? 'is-last' : ''}}">
+            {{index >= items.length - 1 ? 'is-last' : ''}}"
+      style="{{index >= items.length - 1 ? '' : ((index < activeIndex - 1 && iconSuccessBg !== '') ? `background-color: ${iconSuccessBg};` : '')}}"
+    >
       <view class="am-hor-step-icon
               {{index <= activeIndex - 1 ? 'is-active' : ''}}
-              {{horizHighlight && index == failIndex - 1 ? 'is-fail' : ''}}"></view>
+              {{horizHighlight && index == failIndex - 1 ? 'is-fail' : ''}}"
+            style="{{horizHighlight && index == failIndex - 1 ? '' : ((index <= activeIndex - 1 && iconSuccessBg !== '') ? `background-color: ${iconSuccessBg};` : '')}}"></view>
     </view>
     <view class="am-hor-step-text">
       <view class="am-hor-step-title
@@ -38,28 +41,41 @@
       <view 
         class="am-vertical-step-line am-vertical-step-line-top {{index < activeIndex ? 'is-active' : ''}}"
         a:if="{{index < items.length - 1}}"
+        style="{{(index < activeIndex && iconSuccessBg !== '') ? `background-color: ${iconSuccessBg};` : ''}}"
       ></view>
       <view 
         class="am-vertical-step-line am-vertical-step-line-bottom {{index < activeIndex - 1 || (index === activeIndex - 1 && index === failIndex - 2) ? 'is-active' : ''}}"
         a:if="{{index < items.length - 1}}"
+        style="{{(iconSuccessBg !== '' && index < activeIndex - 1 || (index === activeIndex - 1 && index === failIndex - 2)) ? `background-color: ${iconSuccessBg};` : ''}}"
       ></view>
       <block a:if="{{showStepNumber}}">
         <view class="am-vertical-step-icon am-vertical-step-number
-        {{index == failIndex - 1 ? 'is-fail' : (index <= activeIndex - 1 ? 'is-active': '')}}">
-          <text class="am-vertical-step-number__txt">{{index + 1}}</text>
+          {{index == failIndex - 1 ? 'is-fail' : (index <= activeIndex - 1 ? 'is-active': '')}}"
+          style="{{index == failIndex - 1 ? '' : ((index <= activeIndex - 1 && iconSuccessBg !== '') ? `background-color: ${iconSuccessBg};` : '')}}"
+        >
+          <text class="am-vertical-step-number__txt"
+            style="{{index == failIndex - 1 ? '' : ((index <= activeIndex - 1 && iconSuccessColor !== '') ? `color: ${iconSuccessColor};` : '')}}"
+          >{{index + 1}}</text>
         </view>
       </block>
       <block a:else>
         <view class="am-vertical-step-icon is-fail" a:if="{{index == failIndex - 1}}">
-          <icon type="cancel" size="{{item.size || size || 20}}"/>
+          <view class="am-vertical-step-icon_aliui is-fail"
+            style="width: {{item.size || size || __size12}}{{valueUnit}}; height: {{item.size || size || __size12}}{{valueUnit}};">
+            <am-icon type="{{iconFail}}" size="{{item.size || size || __size12}}" color="#fff" />
+          </view>
         </view>
         <view class="am-vertical-step-icon is-active" a:elif="{{index <= activeIndex - 1}}">
-          <image mode="widthFix" class="am-vertical-step-active-image" a:if="{{item.activeIcon}}" src="{{item.activeIcon}}" style="width: {{item.size || size || 20}}px;"/>
-          <icon a:else type="success" size="{{item.size || size || 20}}"/>
+          <image mode="widthFix" class="am-vertical-step-active-image" a:if="{{item.activeIcon}}" src="{{item.activeIcon}}"
+            style="width: {{item.size || size || __size12}}{{valueUnit}}; {{iconSuccessBg !== '' ? `background-color: ${iconSuccessBg};` : ''}}"/>
+          <view a:else class="am-vertical-step-icon_aliui is-active"
+            style="{{iconSuccessBg !== '' ? `background-color: ${iconSuccessBg};` : ''}} width: {{item.size || size || __size12}}{{valueUnit}}; height: {{item.size || size || __size12}}{{valueUnit}};">
+            <am-icon type="{{iconSuccess}}" size="{{item.size || size || __size12}}" color="{{iconSuccessColor === '' ? '#fff' : iconSuccessColor}}" />
+          </view>
         </view>
         <view a:else>
-          <image mode="widthFix" class="am-vertical-step-icon am-vertical-step-image" a:if="{{item.icon}}" src="{{item.icon}}" style="width: {{item.size || size || 20}}px;"/>
-          <view class="am-vertical-step-icon is-normal" a:else style="width: {{item.size || size || 8}}px; height: {{item.size || size || 8}}px;"></view>
+          <image mode="widthFix" class="am-vertical-step-icon am-vertical-step-image" a:if="{{item.icon}}" src="{{item.icon}}" style="width: {{item.size || size || __size12}}{{valueUnit}};"/>
+          <view class="am-vertical-step-icon is-normal" a:else style="width: {{item.size || size || __size8}}{{valueUnit}}; height: {{item.size || size || __size8}}{{valueUnit}};"></view>
         </view>
       </block>
     </view>

src/steps/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "am-icon": "../am-icon/index"
+  }
 }

src/steps/index.less

@@ -149,6 +149,7 @@
 .am-vertical-step-image {
   width: 24px;
   /* height: 24px; */
+  padding: @size-1;
   border-radius: @corner-radius-circle;
   border-radius: var(--am-steps-icon-border-radius, @corner-radius-circle);
 }
@@ -249,3 +250,19 @@
   background-color: @color-text-warning;
   background-color: var(--am-steps-vertical-warning-color, @color-text-warning);
 }
+
+.am-vertical-step-icon_aliui {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  padding: @size-1;
+  border-radius: 50%;
+}
+.am-vertical-step-icon_aliui.is-fail {
+  background-color: @color-text-warning;
+  background-color: var(--am-steps-vertical-warning-color, @color-text-warning);
+}
+.am-vertical-step-icon_aliui.is-active {
+  background-color: @color-text-primary;
+  background-color: var(--am-steps-vertical-title-active-color, @color-text-primary);
+}

src/steps/index.md

@@ -22,8 +22,12 @@
 | direction   | String                                              | horizontal | vertical <br/> horizontal | 显示方向，可选值：`vertical`、`horizontal` | -        | false |
 | size        | Number                                              | 0          | -                         | 统一的icon大小，单位为px                   | -        | false |
 | items       | Array[{title, description, icon, activeIcon, size}] | []         | -                         | 步骤详情                                   | -        | true  |
-| showStepNumber | Boolean | false | - | 是否以数字序列展示步骤 icon | [1.1.2](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
-| horizHighlight | Boolean | false | - | 用于控制水平方向是否启用高亮展示 title | [1.1.3](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
+| showStepNumber | Boolean | false | - | 是否以数字序列展示步骤 icon | [1.1.2](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
+| horizHighlight | Boolean | false | - | 用于控制水平方向是否启用高亮展示 title | [1.1.3](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
+| iconFail | String | close | 参考 [am-icon](https://opendocs.alipay.com/mini/component-ext/am-icon) 的 `type` 值 | 设置失败步骤的 icon 类型 | [1.1.7](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
+| iconSuccess | String | check | 参考 [am-icon](https://opendocs.alipay.com/mini/component-ext/am-icon) 的 `type` 值 | 设置已激活步骤的 icon 类型 | [1.1.7](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
+| iconSuccessBg | String |  | 参考 CSS 中的颜色值描述方式 | 当前激活步骤的 icon 背景色 | [1.1.7](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
+| iconSuccessColor | String |  | 参考 CSS 中的颜色值描述方式 | 当前激活步骤的 icon 文本颜色 | [1.1.7](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | false |
 
 ### slot
 steps 组件中的 slot 插槽可根据具体的步骤数设置，如有 4 个步骤点，那么可插入 4 个 slot。
@@ -55,6 +59,10 @@ slot 名称的格式为：`desc_1`、`desc_2`、`desc_n`...以此类推，将 n
 ### tips
 * 当 `showStepNumber` 为 `true` 时将会忽略 items 属性中 icon 相关属性，仅以数字序列方式展示；
 * slot 中的数字与 items 的序列相对应，将会在 items 属性中没有 description 时展示；
+* `iconSuccessBg` 改变的不仅仅是当前已激活的步骤背景色，同时也将会修改线条颜色；如果 `items.activeIcon` 所使用的图片是含有透明背景的图片时，背景颜色也将会显示；
+* 当使用的 icon 非图片形式时，`iconSuccessColor` 可修改 icon 的颜色以及数字序列的数字文本颜色；
+* `iconSuccessBg` 和 `iconSuccessColor` 仅修改当前已激活的步骤，尚未达到的步骤保持灰色模式，且不可配置；
+* 步骤中失败的提示仅提供修改 icon 类型，无修改颜色的配置；
 
 
 ## 示例

src/steps/index.ts

@@ -1,3 +1,5 @@
+import fmtUnit from '../_util/fmtUnit';
+
 Component({
   props: {
     className: '',
@@ -8,6 +10,14 @@ Component({
     items: [],
     showStepNumber: false,
     horizHighlight: false, // 用于控制水平方向是否启用高亮展示 title
+    iconFail: 'close', // 提示失败的 icon 图标
+    iconSuccess: 'check', // 提示成功的 icon 图标
+    iconSuccessBg: '', // 成功 icon 图标的背景颜色，且同时修改步骤线条颜色
+    iconSuccessColor: '', // 成功 icon 的文本颜色
+  },
+  data: {
+    __size12: fmtUnit(12),
+    __size8: fmtUnit(8),
+    valueUnit: fmtUnit('px'),
   },
 });
-

src/tabs/index.axml

@@ -6,6 +6,8 @@
       style="background-color: {{tabBarBackgroundColor}};{{(elevator || stickyBar) && elevatorTop ? `top: ${elevatorTop};` : ''}}"
     >
       <view class="am-tabs-bar-content-wrap">
+        <view a:if="{{showLeftShadow}}" class="am-tabs-scroll-left"  style="background-color: {{tabBarBackgroundColor}};"></view>
+        <view a:if="{{showRightShadow}}" class="am-tabs-scroll-right"  style="background-color: {{tabBarBackgroundColor}};"></view>
         <scroll-view
           scroll-left="{{viewScrollLeft}}"
           scroll-into-view="tabs-item-{{tabsName?tabsName+'-':''}}{{tabViewNum}}"
@@ -14,8 +16,6 @@
           onScroll="showLeftShadow"
           class="am-tabs-bar-content"
           id="am-tabs-bar-{{tabsName?tabsName+'-':''}}content">
-          <view a:if="{{showLeftShadow}}" class="am-tabs-scroll-left"  style="background-color: {{tabBarBackgroundColor}};"></view>
-          <view class="am-tabs-scroll-right"  style="background-color: {{tabBarBackgroundColor}};"></view>
           <block a:for="{{tabs}}">
             <view
               id="tabs-item-{{tabsName?tabsName+'-':''}}{{index}}"

src/tabs/index.ts

@@ -63,6 +63,7 @@ Component({
     autoplay: false,
     animation: false,
     showLeftShadow: false,
+    showRightShadow: true,
     version: my.SDKVersion,
     viewScrollLeft: 0,
     tabViewNum: 0,
@@ -276,7 +277,9 @@ Component({
       }
     },
     showLeftShadow(e) {
-      if (e.detail.scrollLeft > 0) {
+      const { scrollLeft, scrollWidth } = e.detail;
+      // 判断是否隐藏左边的阴影
+      if (scrollLeft > 0) {
         this.setData({
           showLeftShadow: true,
         });
@@ -285,6 +288,16 @@ Component({
           showLeftShadow: false,
         });
       }
+      // 判断是否隐藏右边的阴影
+      if (scrollLeft + this.data.boxWidth >= scrollWidth - 8) {
+        this.setData({
+          showRightShadow: false,
+        });
+      } else {
+        this.setData({
+          showRightShadow: true,
+        });
+      }
     },
     onTabFirstShow(e) {
       // SDKversion 最低要求 1.9.4

src/vtabs/index.axml

@@ -39,8 +39,7 @@
         class="am-vtabs-slides am-vtabs-slides-{{$id}}"
         scroll-with-animation="{{animated}}"
         scroll-y="{{true}}"
-        scroll-top="{{scrollType === 'tap' ? wrapScrollTop : 1}}"
-        scroll-into-view="{{scrollType === 'scroll' ? wrapScrollTop : ''}}"
+        scroll-top="{{ wrapScrollTop }}"
         onScroll="onScroll">
         <slot></slot>
       </scroll-view>