fix(components): tabbar 布局

NervJS · May 25, 2018 · 7f4a50b · 7f4a50b
1 parent 6dfcf36
commit 7f4a50b
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 43 deletions.
diff --git a/packages/taro-cli/src/h5.js b/packages/taro-cli/src/h5.js
@@ -56,6 +56,7 @@ const entryFilePath = path.join(sourceDir, CONFIG.ENTRY)
 
 let pages = []
 let tabBar
+let tabbarPos
 
 // let isBuildingScripts = {}
 // let isBuildingStyles = {}
@@ -130,6 +131,9 @@ function processEntry (code) {
               } else if (key.name === 'tabBar' && t.isObjectExpression(value)) {
                 // tabBar
                 tabBar = value
+                value.properties.forEach(node => {
+                  if (node.key.name === 'position') tabbarPos = node.value.value
+                })
               }
             }
           })
@@ -232,13 +236,23 @@ function processEntry (code) {
           funcBody = `<${routerImportDefaultName}.Router />`
 
           if (tabBar) {
-            funcBody = `
-              <${tabBarContainerComponentName}>
-                <${tabBarPanelComponentName}>
-                  ${funcBody}
-                </${tabBarPanelComponentName}>
-                <${tabBarComponentName} conf={${tabBarConfigName}} router={${taroImportDefaultName}}/>
-              </${tabBarContainerComponentName}>`
+            if (tabbarPos === 'top') {
+              funcBody = `
+                <${tabBarContainerComponentName}>
+                  <${tabBarComponentName} conf={${tabBarConfigName}} router={${taroImportDefaultName}}/>
+                  <${tabBarPanelComponentName}>
+                    ${funcBody}
+                  </${tabBarPanelComponentName}>
+                </${tabBarContainerComponentName}>`
+            } else {
+              funcBody = `
+                <${tabBarContainerComponentName}>
+                  <${tabBarPanelComponentName}>
+                    ${funcBody}
+                  </${tabBarPanelComponentName}>
+                  <${tabBarComponentName} conf={${tabBarConfigName}} router={${taroImportDefaultName}}/>
+                </${tabBarContainerComponentName}>`
+            }
           }
 
           if (providerComponentName && storeName) {

diff --git a/packages/taro-components/src/components/tabbar/container.js b/packages/taro-components/src/components/tabbar/container.js
@@ -4,7 +4,7 @@ import View from '../view'
 export default class TabbarContainer extends Nerv.Component {
   render () {
     const { children, className, ...reset } = this.props
-    const cls = classNames('weui-tab', className)
+    const cls = classNames('taro-tabbar__container', className)
     return (
       <View className={cls} {...reset}>
         {children}

diff --git a/packages/taro-components/src/components/tabbar/index.js b/packages/taro-components/src/components/tabbar/index.js
@@ -43,40 +43,41 @@ class Tabbar extends Nerv.Component {
       [`taro-tabbar__border-${conf.borderStyle}`]: true
     })
     return (
-      <div
-        className={containerCls}
-        style={{
-          position: 'fixed',
-          backgroundColor: conf.backgroundColor || ''
-        }}
-      >
-        {this.state.list.map((item, index) => {
-          const cls = classNames('weui-tabbar__item', {
-            [`weui-bar__item_on`]: item.selected
-          })
-          let textStyle = {
-            color: item.selected ? conf.selectedColor : conf.color || ''
-          }
-          return (
-            <a
-              key={index}
-              href='javascript:;'
-              className={cls}
-              onClick={handleSelect.bind(this, index)}
-            >
-              <span style='display: inline-block;position: relative;'>
-                <img
-                  src={item.selected ? item.selectedIconPath : item.iconPath}
-                  alt=''
-                  className='weui-tabbar__icon'
-                />
-              </span>
-              <p className='weui-tabbar__label' style={textStyle}>
-                {item.text}
-              </p>
-            </a>
-          )
-        })}
+      <div className='taro-tabbar__tabbar'>
+        <div
+          className={containerCls}
+          style={{
+            backgroundColor: conf.backgroundColor || ''
+          }}
+        >
+          {this.state.list.map((item, index) => {
+            const cls = classNames('weui-tabbar__item', {
+              [`weui-bar__item_on`]: item.selected
+            })
+            let textStyle = {
+              color: item.selected ? conf.selectedColor : conf.color || ''
+            }
+            return (
+              <a
+                key={index}
+                href='javascript:;'
+                className={cls}
+                onClick={handleSelect.bind(this, index)}
+              >
+                <span style='display: inline-block;position: relative;'>
+                  <img
+                    src={item.selected ? item.selectedIconPath : item.iconPath}
+                    alt=''
+                    className='weui-tabbar__icon'
+                  />
+                </span>
+                <p className='weui-tabbar__label' style={textStyle}>
+                  {item.text}
+                </p>
+              </a>
+            )
+          })}
+        </div>
       </div>
     )
   }

diff --git a/packages/taro-components/src/components/tabbar/panel.js b/packages/taro-components/src/components/tabbar/panel.js
@@ -4,7 +4,7 @@ import View from '../view'
 export default class TabbarPanel extends Nerv.Component {
   render () {
     const { children, className, ...reset } = this.props
-    const cls = classNames('weui-tab__panel', className)
+    const cls = classNames('taro-tabbar__panel', className)
     return (
       <View className={cls} {...reset}>
         {children}

diff --git a/packages/taro-components/src/components/tabbar/style/index.scss b/packages/taro-components/src/components/tabbar/style/index.scss
@@ -1,3 +1,9 @@
+html, body {
+	height: 100%;
+}
+#app {
+	height: 100%;
+}
 .taro-tabbar {
   &__border {
     &-white {
@@ -6,4 +12,20 @@
       }
     }
   }
+  &__container {
+  	display: flex;
+  	height: 100%;
+  	flex-direction: column;
+  }
+  &__panel {
+  	flex: 1;
+  	position: relative;
+  	overflow: auto;
+
+  }
+  &__tabbar {
+  	position: relative;
+  	height: 50px;
+  	width: 100%;
+  }
 }