[+] update for ep

Author: tw93

CHANGELOG.md

@@ -1,9 +1,11 @@
 # Change Log
 
 ## 0.3.10
-- [+] New component: [wxc-icon](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-icon/README.md) 🎉🎉 
+- [+] New component: [`wxc-icon`](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-icon/README.md) 🎉🎉 
+- New component: [`wxc-city`](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-city/README.md)
 - [-] Remove the default position relative style.
-- [+] `wxc-indexlist` add a head slot. [issue](https://github.com/alibaba/weex-ui/issues/105)
+- [+] `wxc-indexlist` add a head slot.   [issue105](https://github.com/alibaba/weex-ui/issues/105)
+- [+] `wxc-tab-bar` [supports for IPhoneX](https://img.alicdn.com/tfs/TB1_qrtkf2H8KJjy0FcXXaDlFXa-768-354.png).
 
 ## 0.3.9
 - [+] `wxc-minibar` supports slot.
@@ -27,7 +29,7 @@
 - [+] Add a [`chat`](https://alibaba.github.io/weex-ui/) of the website.
 
 ## 0.3.3
-- [+]  [wxc-tab-bar](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-page-bar/README.md) supports `bedge`、`dot`
+- [+]  [wxc-tab-bar](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-page-bar/README.md) supports `bedge`、`dot` setting.
 - [+] Add component [demo page](https://alibaba.github.io/weex-ui/docc/demo.html) of the website.
 
 ## 0.3.2

README.md

@@ -148,6 +148,7 @@ More details can be found in [How to use with weex-toolkit](/docs/with-weex-tool
 |[wxc-stepper](packages/wxc-stepper/)|Data Entry|Quantity changer|
 |[wxc-searchbar](packages/wxc-searchbar/)|Data Entry|Search bar component|
 |[wxc-grid-select](packages/wxc-grid-select/)|Data Display|Grid selection component|
+|[wxc-icon](packages/wxc-icon/)|Data Display|Common iconFont summary |
 |[wxc-indexlist](packages/wxc-indexlist/)|Data Display|Index list component|
 |[wxc-page-calendar](packages/wxc-page-calendar/)|Data Display|Full page calendar|
 |[wxc-rich-text](packages/wxc-rich-text/)|Data Display|Dynamic template|

README_cn.md

@@ -136,6 +136,7 @@ npm i babel-preset-stage-0 babel-plugin-component  -D
 |[wxc-stepper](packages/wxc-stepper/README_cn.md)|数据输入|计数器|
 |[wxc-searchbar](packages/wxc-searchbar/README_cn.md)|数据输入|搜索栏|
 |[wxc-grid-select](packages/wxc-grid-select/README_cn.md)|数据展示|网格选择|
+|[wxc-icon](packages/wxc-icon/README_cn.md)|数据展示|通用 iconFont 汇集 |
 |[wxc-indexlist](packages/wxc-indexlist/README_cn.md)|数据展示|索引列表|
 |[wxc-page-calendar](packages/wxc-page-calendar/README_cn.md)|数据展示|全屏日历|
 |[wxc-rich-text](packages/wxc-rich-text/README_cn.md)|数据展示|动态模块 富文本|

packages/wxc-tab-bar/index.vue

@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="tab-title-list"
-         :style="{ backgroundColor: tabStyles.bgColor, height: (tabStyles.height)+'px'}">
+         :style="{ backgroundColor: tabStyles.bgColor, height: (tabStyles.height + (isIPhoneX ? 78 : 0))+'px',paddingBottom:isIPhoneX?'78px':'0'}">
       <div class="title-item"
            v-for="(v,index) in tabTitles"
            :key="index"
@@ -185,6 +185,7 @@
           'src': `url(${tabStyles.iconFontUrl})`
         });
       }
+      this.isIPhoneX = Utils.env.isIPhoneX();
     },
     methods: {
       decode (text) {

packages/wxc-tab-page/README.md

@@ -2,6 +2,8 @@
 
 > Tab page make it easy to switch between different views
 
+!> The effect of sliding with hand is based on [expressionBinding](https://github.com/alibaba/weex/issues/1730) feature. Make sure your app [support it](https://github.com/alibaba/weex-ui/issues/6).
+ 
 ### Rule
 - Allow configuration of the head, support `ExpressionBinding` gesture to follow the effect, H5 support downgrade slide switch.
 - Commonly used in Tab switch pages, currently supports **icon 、text and iconFont** form the top bar, You can see in [here](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)
@@ -35,13 +37,9 @@
         <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                       url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                       @wxcPanItemPan="wxcPanItemPan">
-          <wxc-item image="https://gtd.alicdn.com/imgextra/TB12yGaNVXXXXX7aXXXSutbFXXX.jpg"
-                    :image-text="tabTitles[index].title"
-                    title="this is title,this is title,this is title,this is title"
-                    :desc="desc"
-                    :tags="tags"
-                    price="219"
-                    price-desc="price-desc"></wxc-item>
+         <div class="content">
+            <text>{{key}}</text>
+         </div>
         </wxc-pan-item>
       </cell>
     </list>
@@ -68,6 +66,14 @@
   .cell {
     background-color: #ffffff;
   }
+  
+  .content{
+    width:750px;
+    height:300px;
+    border-bottom-width:1px;
+    align-items: center;
+    justify-content: center;
+  }
 </style>
 <script>
   const dom = weex.requireModule('dom');
@@ -77,7 +83,7 @@
   import Config from './config'
 
   export default {
-    components: { WxcTabPage, WxcPanItem, WxcItem },
+    components: { WxcTabPage, WxcPanItem },
     data: () => ({
       tabTitles: Config.tabTitles,
       tabStyles: Config.tabStyles,
@@ -86,17 +92,7 @@
       demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
       supportSlide: true,
       isTabView: true,
-      tabPageHeight: 1334,
-      desc: [{
-        type: 'text',
-        value: 'rich-text',
-        theme: 'gray'
-      }],
-      tags: [{
-        type: 'tag',
-        value: 'rich tag text',
-        theme: 'yellow'
-      }]
+      tabPageHeight: 1334
     }),
     created () {
       this.tabPageHeight = Utils.env.getPageHeight();

packages/wxc-tab-page/README_cn.md

@@ -2,6 +2,8 @@
 
 > Weex tab 页面滑动切换组件
 
+!> 随手滑动的效果依赖于 [expressionBinding](https://github.com/alibaba/weex/issues/1730) 特性，使用前请确定你的App[是否支持](https://github.com/alibaba/weex-ui/issues/6)。
+
 ### 规则
 - 允许对头部进行配置，支持 ExpressionBinding 手势跟随效果，H5 支持降级效果滑动切换
 - 常用于 Tab 切换页面，目前支持**icon、text、iconFont**形式的顶栏,详细可见[config.js](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)
@@ -35,13 +37,9 @@
         <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                       url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                       @wxcPanItemPan="wxcPanItemPan">
-          <wxc-item image="https://gtd.alicdn.com/imgextra/TB12yGaNVXXXXX7aXXXSutbFXXX.jpg"
-                    :image-text="tabTitles[index].title"
-                    title="飞猪专线｜四川成都出发到九寨沟牟尼沟 温泉3天2晚纯玩跟团旅游"
-                    :desc="desc"
-                    :tags="tags"
-                    price="219"
-                    price-desc="月售58笔｜999+条评论"></wxc-item>
+         <div class="content">
+            <text>{{key}}</text>
+         </div>
         </wxc-pan-item>
       </cell>
     </list>
@@ -68,6 +66,14 @@
   .cell {
     background-color: #ffffff;
   }
+  
+  .content{
+    width:750px;
+    height:300px;
+    border-bottom-width:1px;
+    align-items: center;
+    justify-content: center;
+  }
 </style>
 <script>
   const dom = weex.requireModule('dom');
@@ -77,7 +83,7 @@
   import Config from './config'
 
   export default {
-    components: { WxcTabPage, WxcPanItem, WxcItem },
+    components: { WxcTabPage, WxcPanItem },
     data: () => ({
       tabTitles: Config.tabTitles,
       tabStyles: Config.tabStyles,
@@ -86,17 +92,7 @@
       demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
       supportSlide: true,
       isTabView: true,
-      tabPageHeight: 1334,
-      desc: [{
-        type: 'text',
-        value: '特价机票|班期:清明 3/27-4/2等',
-        theme: 'gray'
-      }],
-      tags: [{
-        type: 'tag',
-        value: '满100减20测试',
-        theme: 'yellow'
-      }]
+      tabPageHeight: 1334
     }),
     created () {
       this.tabPageHeight = Utils.env.getPageHeight();
@@ -107,7 +103,7 @@
       wxcTabPageCurrentTabSelected (e) {
         const self = this;
         const index = e.page;
-        /* 未加载tab模拟数据请求 */
+        /* Unloaded tab analog data request */
         if (!Utils.isNonEmptyArray(self.tabList[index])) {
           setTimeout(() => {
             Vue.set(self.tabList, index, self.demoList);
@@ -122,7 +118,6 @@
     }
   };
 </script>
-
 ```
 更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/index.vue)