最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS中继承weui的tabbar但是底部tab位置不对

ReactJS crifan 719浏览 0评论

折腾:

【已解决】ReactJS中如何实现在底部的tab选项卡且支持图标

期间,虽然代码:

import {
  Tab,
  TabBarItem,
  Article,
} from ‘react-weui’;
//import styles
import ‘weui’;
import ‘react-weui/build/packages/react-weui.css’;
import IconButton from ‘assets/img/icon_nav_button.png’;
import IconMsg from ‘assets/img/icon_nav_msg.png’;
import IconArticle from ‘assets/img/icon_nav_article.png’;
    return (
      <div className=”main_wrapper”>
        <Tab type=”tabbar”>
            <TabBarItem icon={<img src={IconButton}/>} label=”首页”>
                <Article>
                    <PageHeader>Page 1</PageHeader>
                    <section>
                        <h2 className=”title”>标题1</h2>
                        <section>
                            <h3>1.1 Title</h3>
                            <p>页面1</p>
                        </section>
                    </section>
                </Article>
            </TabBarItem>
            <TabBarItem icon={<img src={IconMsg}/>} label=”Tab2″>
                <Article>
                    <PageHeader>Page 2</PageHeader>
                    <section>
                        <h2 className=”title”>标题2</h2>
                        <section>
                            <h3>2.1 Title</h3>
                            <p>页面2</p>
                        </section>
                    </section>
                </Article>
            </TabBarItem>
            <TabBarItem icon={<img src={IconArticle}/>} label=”Tab3″>
                <Article>
                    <PageHeader>Page 3</PageHeader>
                    <section>
                        <h2 className=”title”>标题3</h2>
                        <section>
                            <h3>3.1 Title</h3>
                            <p>页面3</p>
                        </section>
                    </section>
                </Article>
            </TabBarItem>
        </Tab>
      </div>
    );

可以显示出底部的tab的选项卡了,但是位置不对,上移了:

无意间调试发现,去掉:

weui-tab的postion: relative

就可以了。

但是现在:

要去搞清楚,为何会出现这个问题

难道是:

【已解决】Reactjs中导入react-weui.css出错编译:You may need an appropriate loader to handle this file type

期间,引入了css module后导致的问题?

去试试:

  {
    test: /\.css$/,
    // use: [‘style-loader’, ‘css-loader’],
    // use: [
    //   { loader: ‘style-loader’ },
    //   {
    //     loader: ‘css-loader’,
    //     options: {
    //       modules: true
    //     }
    //   }
    // ],
    use: ExtractTextPlugin.extract({
      fallback: ‘style-loader’, // 编译后用什么loader来提取css文件
      use: ‘css-loader’ //指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
    }),
    // use: extractCSS.extract([ ‘css-loader’, ‘postcss-loader’ ]),
    // use: extractCSS.extract([
    //   ‘css-loader’,
    //   {
    //     loader: ‘postcss-loader’,
    //     options: {
    //       // plugins: () => [require(‘autoprefixer’)]
    //     }
    //   }
    // ]),
    
    // include: path.resolve(__dirname, ‘src’)
  },
  {
    test: /\.less$/,
    use: [
      {
        loader: ‘style-loader’ // creates style nodes from JS strings
      }, {
        loader: ‘css-loader’ // translates CSS into CommonJS
      }, {
        loader: ‘less-loader’ // compiles Less to CSS
      }
    ]
    // test: /\.less$/i,
    // use: extractLESS.extract([ ‘css-loader’, ‘less-loader’ ])
  },

结果问题依旧。

又或者是display是flex,和这些position 不匹配?

或者是父级元素,没有指定宽高?

weui postioin relative not work

Relative positioning – popovers do not scroll with content · Issue #144 · sandywalker/webui-popover

html – Top in position relative doesn’t work – Stack Overflow

html – css relative positioning not working in chrome – Stack Overflow

有人说了:

parent应该是:

width: 100%;

height: 100%;

所以此处自己加上去试试

此处虽然加了,但是问题依旧

css relative not work

html – CSS Relative Positioning Not Working – Stack Overflow

结果给parent加了:

display:inline-block;

或:

display:block;

都没用。

试了试:

.weui-tab {
  position: absolute !important;
}

或:

.main_wrapper {
  display:inline-block;
  width: 100%;
  height: 100%;
  > weui-tab {
    position: absolute !important;
  }
}

都没效果,都没发覆盖weui-tab的postion属性。

CSS position: absolute with position: relative “top” not working – Stack Overflow

position – CSS relative + right (or bottom) almost NEVER work – Stack Overflow

position | CSS-Tricks

【总结】

weui的tab,此处作为child元素,其中的

position: relative;

没效果,去掉后才可以。

但是又不方便直接去掉(因为是引用的

import ‘react-weui/build/packages/react-weui.css’;

,没发,不方便手动去修改)

结果最后是给parent元素加上:

position: absolute;

.main_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

对应js:

<div className=”main_wrapper”>
    <Tab type=”tabbar”>
        <TabBarItem icon={<img src={IconButton}/>} label=”首页”>

然后就可以了:

转载请注明:在路上 » 【已解决】ReactJS中继承weui的tabbar但是底部tab位置不对

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
62 queries in 0.288 seconds, using 18.91MB memory