fix: 修复h5 问题

jd-opensource · Aug 17, 2018 · 1858b7a · 1858b7a
1 parent 31d8c8f
commit 1858b7a
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 31 deletions.
diff --git a/docs/markdown/segmented-control.md b/docs/markdown/segmented-control.md
@@ -54,7 +54,7 @@ import AtSegmentedControl from 'taro-ui'
 | selectedColor  | 选中的标签背景色与边框颜色  | String | - | `#6190E8` |
 | values | 选项数组,值是字符串,eg: ['标签页1','标签页2' ] | Array  | - | false |
 | disabled | 是否禁止点击 | Boolean  | - | false |
-| fontSize | 字体大小 | Number  | - | 14 |
+| fontSize | 字体大小,单位h5为rem，小程序为rem | Number  | - | 28 |
 
 ## 事件
 

diff --git a/package.json b/package.json
@@ -34,11 +34,11 @@
   "author": "O2Team <aotu.io>",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/components": "1.0.0-beta.9",
-    "@tarojs/router": "1.0.0-beta.9",
-    "@tarojs/taro": "1.0.0-beta.9",
-    "@tarojs/taro-h5": "1.0.0-beta.9",
-    "@tarojs/taro-weapp": "1.0.0-beta.9",
+    "@tarojs/components": "1.0.0-beta.11",
+    "@tarojs/router": "1.0.0-beta.11",
+    "@tarojs/taro": "1.0.0-beta.11",
+    "@tarojs/taro-h5": "1.0.0-beta.11",
+    "@tarojs/taro-weapp": "1.0.0-beta.11",
     "lodash": "^4.17.10",
     "nervjs": "^1.3.0",
     "prop-types": "^15.6.2"
@@ -51,12 +51,12 @@
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
     "@mapbox/jsxtreme-markdown-loader": "^0.8.3",
-    "@tarojs/cli": "1.0.0-beta.9",
-    "@tarojs/plugin-babel": "1.0.0-beta.9",
-    "@tarojs/plugin-csso": "1.0.0-beta.9",
-    "@tarojs/plugin-sass": "1.0.0-beta.9",
-    "@tarojs/plugin-uglifyjs": "1.0.0-beta.9",
-    "@tarojs/webpack-runner": "1.0.0-beta.9",
+    "@tarojs/cli": "1.0.0-beta.11",
+    "@tarojs/plugin-babel": "1.0.0-beta.11",
+    "@tarojs/plugin-csso": "1.0.0-beta.11",
+    "@tarojs/plugin-sass": "1.0.0-beta.11",
+    "@tarojs/plugin-uglifyjs": "1.0.0-beta.11",
+    "@tarojs/webpack-runner": "1.0.0-beta.11",
     "at-ui-style": "^1.5.1",
     "autoprefixer": "^9.0.2",
     "babel-core": "^7.0.0-0",
@@ -74,11 +74,11 @@
     "css-loader": "^1.0.0",
     "eslint": "^4.19.1",
     "eslint-config-o2team": "^0.1.6",
-    "eslint-config-taro": "1.0.0-beta.9",
+    "eslint-config-taro": "1.0.0-beta.11",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jest": "^21.21.0",
     "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-taro": "1.0.0-beta.9",
+    "eslint-plugin-taro": "1.0.0-beta.11",
     "file-loader": "^1.1.11",
     "front-matter": "^2.3.0",
     "glob": "^7.1.2",

diff --git a/src/components/checkbox/index.scss b/src/components/checkbox/index.scss
@@ -34,10 +34,10 @@ $checkbox-icon-size: 40px;
     border-radius: $border-radius-circle;
     background-color: $color-bg;
     box-sizing: border-box;
-    overflow: hidden;
 
     &--selected {
       background-color: $color-brand;
+      border: none;
     }
   }
 

diff --git a/src/components/nav-bar/index.scss b/src/components/nav-bar/index.scss
@@ -27,7 +27,7 @@ $spacing-h: 5PX;
     text-align: left;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 20PX;
+    height: 100%;
     padding: $spacing-v $spacing-h;
     @include active;
   }
@@ -61,6 +61,7 @@ $spacing-h: 5PX;
     width: 50%;
     display: inline-block;
     text-align: center;
+    box-sizing: border-box;
     padding: $spacing-v $spacing-h;
     @include active;
   }

diff --git a/src/components/radio/index.js b/src/components/radio/index.js
@@ -24,8 +24,8 @@ class AtRadio extends Taro.Component {
           <View className='at-radio__option_wrap'>
             <View className='at-radio__option_container'>
               <View className='at-radio__title'>{option.label}</View>
-              <View className='at-radio__icon_container'>
-                {value === option.value ? <AtIcon value='check' size='14' color='#6190E8' /> : null}
+              <View className={value === option.value ? 'at-radio__icon at-radio__icon--checked' : 'at-radio__icon'}>
+                <AtIcon value='check' size='14' color='#6190E8' />
               </View>
             </View>
             {option.desc ? <View className='at-radio__desc'>{option.desc}</View> : null}

diff --git a/src/components/radio/index.scss b/src/components/radio/index.scss
@@ -20,11 +20,16 @@
     line-height: $line-height-zh;
   }
 
-  &__icon_container {
+  &__icon {
     flex: 1;
     text-align: right;
     font-size: $font-size-lg;
     overflow: hidden;
+    visibility: hidden;
+
+    &--checked {
+      visibility: visible;
+    }
   }
 
   &__desc {

diff --git a/src/components/rate/index.js b/src/components/rate/index.js
@@ -23,21 +23,21 @@ class AtRate extends Taro.Component {
       margin: Taro.pxTransform(margin)
     }
     // 生成星星颜色 className 数组，方便在jsx中直接map
-    const clsArr = []
+    const classNameArr = []
     const floorValue = Math.floor(value)
     const ceilValue = Math.ceil(value)
     for (let i = 0; i < max; i++) {
       if (floorValue > i) {
-        clsArr.push('at-rate__icon at-rate__icon--on')
+        classNameArr.push('at-rate__icon at-rate__icon--on')
       } else if (ceilValue - 1 === i) {
-        clsArr.push('at-rate__icon at-rate__icon--half')
+        classNameArr.push('at-rate__icon at-rate__icon--half')
       } else {
-        clsArr.push('at-rate__icon at-rate__icon--off')
+        classNameArr.push('at-rate__icon at-rate__icon--off')
       }
     }
     return <View className='at-rate' >
       {
-        clsArr.map((cls, i) => <View
+        classNameArr.map((cls, i) => <View
           className={cls}
           key={i}
           style={iconStyle}

diff --git a/src/components/segmented-control/index.js b/src/components/segmented-control/index.js
@@ -11,7 +11,7 @@ import './index.scss'
  * @prop selectedColor {String} 选中的标签背景色与边框颜色，default:#6190E8
  * @prop values {Array} 选项数组,值是字符串 eg: ['标签页1','标签页2' ]
  * @prop disabled {Boolean} 是否禁止点击 default:false
- * @prop fontSize {String|Number} 字体大小,目前单位是px,等taro支持单位转化再修改 default:'14'
+ * @prop fontSize {String|Number} 字体大小,单位h5为rem，小程序为rem default:'28'
  * @prop onClick {Function} 点击时触发事件，回调参数 数组索引值
  */
 class AtSegmentedControl extends Taro.Component {
@@ -27,21 +27,26 @@ class AtSegmentedControl extends Taro.Component {
       color: ${selectedColor};
       background-color:${color};
       border-color: ${selectedColor};
-      font-size: ${fontSize}px;
+      font-size: ${Taro.pxTransform(fontSize)};
     `
     const selectedItemStyle = `
       color: ${color};
       background-color:${selectedColor};
       border-color: ${selectedColor};
-      font-size: ${fontSize}px;
+      font-size: ${Taro.pxTransform(fontSize)};
     `
     const rootClassName = ['at-segmented-control']
     if (disabled) {
       rootClassName.push('at-segmented-control--disabled')
     }
     return <View className={rootClassName} style={rootStyle}>
       {
-        values.map((value, i) => <View className='at-segmented-control__item' style={current === i ? selectedItemStyle : itemStyle} key={value} onClick={this.handleClick.bind(this, i, disabled)}>
+        values.map((value, i) => <View
+          className='at-segmented-control__item'
+          style={current === i ? selectedItemStyle : itemStyle}
+          key={value}
+          onClick={this.handleClick.bind(this, i, disabled)}
+        >
           {value}
         </View>)
       }
@@ -51,7 +56,7 @@ class AtSegmentedControl extends Taro.Component {
 AtSegmentedControl.defaultProps = {
   current: 0,
   color: '#fff',
-  fontSize: '14',
+  fontSize: '28',
   disabled: false,
   selectedColor: '#6190E8',
   values: [],

diff --git a/src/components/tab-bar/index.js b/src/components/tab-bar/index.js
@@ -43,7 +43,12 @@ class AtTabBar extends Taro.Component {
     return <View className={rootClassName} style={rootStyle}>
       {
         tabList.map((item, i) => {
-          return <View className='at-tab-bar__item' style={current === i ? selectedStyle : defaultStyle} key={item} onClick={this.handleClick.bind(this, i)}>
+          return <View
+            className='at-tab-bar__item'
+            style={current === i ? selectedStyle : defaultStyle}
+            key={item.title}
+            onClick={this.handleClick.bind(this, i)}
+          >
             <AtBadge dot={item.dot} value={item.text} max={item.max}>
               {
                 item.iconType

diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
@@ -75,7 +75,7 @@ class AtTabs extends Taro.Component {
     return <View className='at-tabs'>
       <View className={headerCls}>
         {
-          tabList.map((item, i) => <View className={current === i ? 'at-tabs__item at-tabs__item--active' : 'at-tabs__item'} key={item} onClick={this.handleClick.bind(this, i)}>
+          tabList.map((item, i) => <View className={current === i ? 'at-tabs__item at-tabs__item--active' : 'at-tabs__item'} key={item.title} onClick={this.handleClick.bind(this, i)}>
             {item.title}
           </View>)
         }