demo 界面优化;

fixed: am-switch在rpx中的兼容问题; fixed: input-item/pick-item的 token 处理; fixed: list-item 中arrow的对齐偏差 enhance: tabs选项卡选中态下划线可配置
Alibaba-mp · May 13, 2020 · 15f514a · 15f514a
1 parent a0b8bac
commit 15f514a
Show file tree

Hide file tree

Showing 22 changed files with 348 additions and 247 deletions.
diff --git a/demo/pages/am-checkbox/index.js b/demo/pages/am-checkbox/index.js
@@ -15,15 +15,15 @@ Page({
     const { id } = e.currentTarget.dataset;
     const { value } = e.detail;
     const { items1 } = this.data;
-    items1.forEach((element) => {
-      if (element.id === id) {
-        // eslint-disable-next-line no-param-reassign
-        element.ctrlChecked = value;
+    const { length } = items1;
+    for (let index = 0; index < length; index += 1) {
+      if (items1[index].id === id) {
+        this.setData({
+          [`items1[${index}].ctrlChecked`]: value,
+        });
+        break;
       }
-    });
-    this.setData({
-      items1,
-    });
+    }
   },
   // 全选
   checkedON() {
@@ -34,11 +34,10 @@ Page({
     this.checkedAll(false);
   },
   checkedAll(status) {
-    const { items1 } = this.data;
-    items1.forEach((element) => {
-      // eslint-disable-next-line no-param-reassign
-      element.ctrlChecked = status;
-    });
+    const items1 = this.data.items1.map((element) => ({
+      ...element,
+      ctrlChecked: status,
+    }));
     this.setData({
       items1,
     });

diff --git a/demo/pages/am-switch/index.acss b/demo/pages/am-switch/index.acss
@@ -1,3 +1,7 @@
 page {
   padding: 24rpx;
+}
+.page-description,
+.switch-item {
+  margin-bottom: 24rpx;
 }
diff --git a/demo/pages/button/index.acss b/demo/pages/button/index.acss
@@ -4,4 +4,30 @@
 
 .container button {
   margin-bottom: 24rpx;
+}
+
+.title {
+  padding-top: 24rpx;
+  font-weight: bold;
+}
+.inputItem {
+  margin: 16rpx 0 24rpx;
+  padding: 8rpx 16rpx;
+  font-size: 30rpx;
+  border: 1px solid #eee;
+}
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 24rpx;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  margin-right: 16rpx;
+}
+.changeItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
 }
diff --git a/demo/pages/button/index.axml b/demo/pages/button/index.axml
@@ -3,35 +3,41 @@
     {{title}}
   </button>
 
-  <view>主标题</view>
-  <input value="{{title}}" onInput="titleChange"/>
-  <view>副标题</view>
-  <input value="{{subtitle}}" onInput="subtitleChange"/>
-  <view>按钮类型</view>
+  <view class="title">主标题</view>
+  <input value="{{title}}" onInput="titleChange" class="inputItem"/>
+  <view class="title">副标题</view>
+  <input value="{{subtitle}}" onInput="subtitleChange" class="inputItem"/>
+  <view class="title">按钮类型</view>
   <radio-group class="radio-group" onChange="typeChange" name="type">
     <label class="radio" a:for="{{types}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>形状</view>
+  <view class="title">形状</view>
   <radio-group class="radio-group" onChange="shapeChange" name="shape">
     <label class="radio" a:for="{{shapes}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>胶囊按钮大小</view>
+  <view class="title">胶囊按钮大小</view>
   <radio-group class="radio-group" onChange="sizeChange" name="size">
     <label class="radio" a:for="{{capsuleSizes}}" key="label-{{index}}">
       <radio value="{{item.name}}" checked="{{item.checked}}" />
       <text class="radio-text">{{item.value}}</text>
     </label>
   </radio-group>
-  <view>是否禁用</view>
-  <checkbox onChange='onDisableChange'/>
-  <view>是否限制胶囊按钮最小宽度</view>
-  <checkbox onChange='onMinWidthChange'/>
-  <view>是否现实loading</view>
-  <checkbox onChange='onLoadingChange'/>
+  <view class="changeItem">
+    <checkbox onChange='onDisableChange' id="disabled__"/>
+    <label for="disabled__" style="margin-left: 8rpx;">是否禁用</label>
+  </view>
+  <view class="changeItem">
+    <checkbox onChange='onMinWidthChange' id="miniBtn__"/>
+    <label for="miniBtn__" style="margin-left: 8rpx;">是否限制胶囊按钮最小宽度</label>
+  </view>
+  <view class="changeItem">
+    <checkbox onChange='onLoadingChange' id="loading__"/>
+    <label for="loading__" style="margin-left: 8rpx;">是否显示 loading</label>
+  </view>
 </view>
diff --git a/demo/pages/message/index.acss b/demo/pages/message/index.acss
@@ -0,0 +1,13 @@
+.radio-text,
+.btnLabel {
+  margin: 0 20rpx 0 4rpx;
+}
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+.radio,
+.showBtn {
+  display: flex;
+  align-items: center;
+}
diff --git a/demo/pages/message/index.axml b/demo/pages/message/index.axml
@@ -8,17 +8,19 @@
     onTapMain="goBack">
     <view slot="tips">这里是通过 <text style="color: red;">slot</text> 插槽加入的内容，加入更多自定义内容。</view>
   </message>
-  <view style="padding: 20rpx;">
+  <view style="padding: 24rpx;">
     <radio-group class="radio-group" onChange="radioChange" name="lib">
       <label class="radio" a:for="{{items}}" key="label-{{index}}">
         <radio value="{{item.name}}" checked="{{item.checked}}" />
         <text class="radio-text">{{item.value}}</text>
       </label>
     </radio-group>
-    <view style="padding:20rpx 0;font-weight: bold;">主标题</view>
-    <input value="{{title}}" onInput="titleChange"/>
-    <view style="padding:20rpx 0;font-weight: bold;">副标题</view>
-    <textarea value="{{subTitle}}" onInput="subtitleChange" style="margin-bottom: 20rpx;" />
-    <checkbox onChange='onChange'/>显示按钮
+    <view style="padding:24rpx 0;font-weight: bold;">主标题</view>
+    <input value="{{title}}" onInput="titleChange" style="padding: 8rpx 16rpx;font-size: 30rpx;border: 1px solid #eee;"/>
+    <view style="padding:24rpx 0;font-weight: bold;">副标题</view>
+    <textarea value="{{subTitle}}" onInput="subtitleChange" style="margin-bottom: 24rpx;padding: 16rpx 16rpx 50rpx;font-size: 30rpx;border: 1px solid #eee;" />
+    <view class="showBtn">
+      <checkbox onChange='onChange' id="showBtn" /><label for="showBtn" class="btnLabel">显示按钮</label>
+    </view>
   </view>
 </view>
diff --git a/demo/pages/notice/index.acss b/demo/pages/notice/index.acss
@@ -1,11 +1,26 @@
 .demo-title {
   font-size: 15px;
   font-weight: 500;
-  padding: 10px 5px;
+  margin: 24rpx 16rpx;
+  padding-bottom: 24rpx;
   border-bottom: 1px solid #ccc;
 }
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24rpx 24rpx;
+}
+.radio-text {
+  margin-right: 24rpx;
+}
+input {
+  margin: 0 0 16rpx 24rpx;
+  padding: 8rpx 16rpx;
+  font-size: 30rpx;
+  border: 1px solid #eee;
+}
 .demo-item {
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 
 .nomore-notice {
@@ -14,4 +29,6 @@
 .itemSize {
   width: 30px;
   height: 30px;
+  margin-right: 24rpx;
+  vertical-align: middle;
 }
diff --git a/demo/pages/notice/index.axml b/demo/pages/notice/index.axml
@@ -1,4 +1,3 @@
-<view class="demo-title">NoticeBar 通告栏</view>
 <view class="demo-item">
   <notice
     marqueeProps="{{marqueeProps}}"
@@ -74,9 +73,9 @@
 
 
 <view class="demo-title">胶囊通告栏 item: </view>
-<checkbox-group onChange="capsuleItemChange" name="capsule">
+<checkbox-group class="radio-group" onChange="capsuleItemChange" name="capsule">
   <label class="checkbox" a:for="{{capsuleItemList}}" key="label-{{index}}">
-    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
+    <checkbox value="{{item.name}}" checked="{{item.checked}}" style="vertical-align: middle;" />
     <image src='{{item.value}}' class="itemSize" />
   </label>
 </checkbox-group>
diff --git a/demo/pages/pagination/index.axml b/demo/pages/pagination/index.axml
@@ -14,12 +14,12 @@
   </pagination>
 </view>
 
-<view style="margin-top: 20px;">正常翻页样式</view>
+<view style="margin-top: 24rpx;padding-bottom: 16rpx;font-weight: bold;">正常翻页样式</view>
 <view style="padding: 20px 20px 0;background-color: #f8f8ba;">
   <pagination currentPage="{{3}}" max="{{10}}" height="200px" />
 </view>
 
-<view style="margin-top: 20px;">反白翻页样式</view>
+<view style="margin-top: 24rpx;padding-bottom: 16rpx;font-weight: bold;">反白翻页样式</view>
 <view style="padding: 20px 20px 0;background-color: #0e98d8;">
   <pagination currentPage="{{5}}" white="true" />
 </view>
diff --git a/demo/pages/search-bar/index.axml b/demo/pages/search-bar/index.axml
@@ -14,6 +14,6 @@
     onSubmit="handleSubmit"
     showCancelButton="{{false}}" />
 </view>
-<view>是否展示Voice图标
-<checkbox onChange='onChange'/>
+<view style="padding: 24rpx">
+  <checkbox onChange='onChange' id="showVoice"/><label for="showVoice">是否展示Voice图标</label>
 </view>
diff --git a/demo/pages/tabs/index.axml b/demo/pages/tabs/index.axml
@@ -1,4 +1,4 @@
-<view style="padding: 12px;">
+<view style="padding: 24rpx;">
   <tabs
     tabs="{{tabs}}"
     tabsName="activeTab"
@@ -7,13 +7,14 @@
     onPlusClick="handlePlusClick"
     activeTab="{{activeTab}}"
     showPlus="{{hasPlus}}"
-    swipeable="{{hasContentHeight}}"
+    swipeable="{{false}}"
     capsule="{{typeCapsule}}"
     hasSubTitle="{{typeHasSubTitle}}"
+    tabBarUnderlineWidth="20px"
   >
-    <block a:for="{{tabs}}" a:if="{{!hasContentHeight}}">
+    <block a:for="{{tabs}}">
       <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:if="{{index === 0}}">
-        <view class="tab-content" style="height: 300px;">高度为 300px {{item.title}}</view>
+        <view class="tab-content" style="height: 130px;">高度为 130px {{item.title}}</view>
       </tab-content>
       <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}" a:elif="{{index === 2}}">
         <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
@@ -22,44 +23,9 @@
         <view class="tab-content">content of {{item.title}}</view>
       </tab-content>
     </block>
-    <block a:for="{{tabs}}" a:if="{{hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab}}">
-        <view class="tab-content" style="height: 200px;">固定高度为 200px {{item.title}}，可滑动内容区域，tabs 跟随变化。</view>
-      </tab-content>
-    </block>
-  </tabs>
-</view>
-<view style="padding: 30px;">
-  <tabs
-    tabs="{{tabs2}}"
-    tabsName="activeTab2"
-    onTabClick="handleTabClick"
-    onChange="handleTabChange"
-    onPlusClick="handlePlusClick"
-    activeTab="{{activeTab2}}"
-    showPlus="{{hasPlus}}"
-    swipeable="{{hasContentHeight}}"
-    capsule="{{typeCapsule}}"
-    hasSubTitle="{{typeHasSubTitle}}"
-  >
-    <block a:for="{{tabs2}}" a:if="{{!hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
-        <view class="tab-content" style="height: 300px;">高度为 300px {{item.title}}</view>
-      </tab-content>
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:elif="{{index === 2}}">
-        <view class="tab-content" style="height: 200px;">改变 tab-content 高度为 200px {{item.title}}</view>
-      </tab-content>
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:else>
-        <view class="tab-content">content of {{item.title}}</view>
-      </tab-content>
-    </block>
-    <block a:for="{{tabs2}}" a:if="{{hasContentHeight}}">
-      <tab-content key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}">
-        <view class="tab-content" style="height: 200px;">固定高度为 200px {{item.title}}，可滑动内容区域，tabs 跟随变化。</view>
-      </tab-content>
-    </block>
   </tabs>
 </view>
+
 <view class="demo-title">tab 类型: </view>
 <radio-group class="radio-group" onChange="typeChange" name="type">
   <label class="radio" a:for="{{type}}" key="label-{{index}}">
@@ -76,16 +42,8 @@
   </label>
 </radio-group>
 
-<view class="demo-title">内容区域是否固定高度: </view>
-<radio-group class="radio-group" onChange="heightChange" name="contentHeight">
-  <label class="radio" a:for="{{contentHeight}}" key="label-{{index}}">
-    <radio value="{{item.name}}" checked="{{item.checked}}" />
-    <text class="radio-text">{{item.value}}</text>
-  </label>
-</radio-group>
-
-<view class="demo-title" a:if="{{!hasContentHeight}}">tabs选项数量: </view>
-<radio-group class="radio-group" onChange="tabsNumberChange" name="tabsNumber" a:if="{{!hasContentHeight}}">
+<view class="demo-title">tabs选项数量: </view>
+<radio-group class="radio-group" onChange="tabsNumberChange" name="tabsNumber">
   <label class="radio" a:for="{{tabsNumber}}" key="label-{{index}}">
     <radio value="{{item.name}}" checked="{{item.checked}}" />
     <text class="radio-text">{{item.value}}</text>