Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tab组件多选项的时候,导致底部bar高度塌陷 #2621

Closed
lancerfox opened this Issue Apr 11, 2018 · 9 comments

Comments

Projects
None yet
6 participants
@lancerfox
Copy link

lancerfox commented Apr 11, 2018

vux@"^2.8.1",
111
22222
组件可以滑动,但是底部Bar塌陷下去
用chrome查看dom
666
点击取消height:44px;恢复正常

@airyland

This comment has been minimized.

Copy link
Owner

airyland commented Apr 11, 2018

demo 同样的代码并不能重现。

@left-handed

This comment has been minimized.

Copy link

left-handed commented Apr 19, 2018

我这也出出现同样问题

@left-handed

This comment has been minimized.

Copy link

left-handed commented Apr 19, 2018

1
我是这样解决的,修改组件tab.vue

@airyland

This comment has been minimized.

Copy link
Owner

airyland commented Apr 19, 2018

麻烦帖一下可以重现的代码。

@left-handed

This comment has been minimized.

Copy link

left-handed commented Apr 20, 2018

<Tab :line-width="2" active-color='#F56C02' v-model="listIndex" :custom-bar-width="getListWidth"> <TabItem ctive-class="active-border" v-for="(item, key) in tabList" :key="key" :selected="listIndex === key">{{item}}</TabItem> </Tab>

import {Tab, TabItem, Swiper, SwiperItem} from **'vux';

tabList: ['推荐', '手机品牌日', '智能', '电视', '电脑', '全面屏', '生活周边', '盒子'],

"vux": "^2.9.0", "vue": "^2.5.2",

在谷歌浏览器测试, 版本 64.0.3282.140

@suncodeer

This comment has been minimized.

Copy link

suncodeer commented Apr 22, 2018

  1. global div { box-sizing: border-box }
  2. five tab items in the tab vue.

When I comment global div { box-sizing: border-box }
The issue is fixed.

@airyland airyland reopened this Apr 22, 2018

airyland added a commit that referenced this issue Apr 23, 2018

@airyland airyland closed this Apr 23, 2018

@MrJiangZhiGuo

This comment has been minimized.

Copy link

MrJiangZhiGuo commented May 7, 2018

请问下,大家是如何解决的? 怎么没看明白是怎么解决的呢?

@alicksnake22

This comment has been minimized.

Copy link

alicksnake22 commented Jul 13, 2018

2.9.2版本里面,我也有相同问题,tab数量多到可滚动的时候,横杆上移了

@alicksnake22

This comment has been minimized.

Copy link

alicksnake22 commented Jul 19, 2018

@airyland 我用了2.9.2版本依旧会塌陷,原因已经找到,是因为我使用了postcss-px-to-viewport插件来开发移动webapp,我在里面配置为忽略vux开头的css类的转换,但是tab里面有一个类名为scrollable,所以并没有忽略到,导致scrollable的padding-bottom被转为vw,造成塌陷,不知道这个scrollable能否改为vux-scrollable之类的?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.