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

i-tab-bar、notice-bar和百度地图同时使用的问题 #75

Open
Moon1102 opened this issue Jun 29, 2018 · 1 comment
Open

i-tab-bar、notice-bar和百度地图同时使用的问题 #75

Moon1102 opened this issue Jun 29, 2018 · 1 comment

Comments

@Moon1102
Copy link

@Moon1102 Moon1102 commented Jun 29, 2018

i-tab-bar、notice-bar和百度地图同时使用的时候 一开始给百度地图所在的view加了position: fixed; height: 100%; width: 100%; 模拟器表现的很好,i-tab-bar始终覆盖在地图上(因为发现它源码里有z-index:8;) 但是一到真机上。。就被地图完全覆盖了。

好吧看看源码找到了对策:
.map_container { position: fixed; height: 100%; width: 100%; bottom: 50px; }

加一个上移bottom: 50px; 确实不挡住tab-bar了 然后开始挡住notice-bar~

然后!

在wxml里变成
<view class="map_container {{ isTop ? 'map_container_top' : '' }}"> <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> </view>

wxss变成
.map_container { position: fixed; height: 100%; width: 100%; bottom: 50px; }

.map_container_top{ top:36px; }

.map { height: 100%; width: 100%; }
通过改变isTop 改变样式以后 模拟器表现依旧没问题 ,如图:
image

上了真机的表现就有点奇怪了: 1.有notice-bar的时候 tab-bar完全被挡住(虽然notice-bar的高度是72rpx,tab-bar高度是50px,设置的top:36px)
2.当点击notice-bar关闭按钮触发tap事件(没错看的源码 文档并没有介绍关闭绑定的方法) 改变isTop的值之后,tab-bar显示出来了。。

@callmelwj
Copy link

@callmelwj callmelwj commented Sep 13, 2018

您好请问这个框架的tabbar具体用法是怎样的,刚接触小程序,搞不太懂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.