ios平台上外层采用position:fiexed, z-index无效 - Githubissues

lingxiaoyi / navigation-bar

微信小程序自定义导航栏组件,navigation,完美适配全部手机

MIT License

763 stars 140 forks source link

ios平台上外层采用position:fiexed, z-index无效 #6

Closed yicm closed 5 years ago

yicm commented 5 years ago

基础调试库版本： 2.8.3
微信都是当前最新版本

wxml:

<view class="search">
    <navBar searchBar="{{true}}" background="{{searchBGColor}}"  bindsearch='search' />
</view>

wxss:

.search {
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 9999;   /* z-index 设置值超过navBar的最大z-index值 */
    position: fixed;
}

开发者工具预览都是正确的，真机(iphone xr/ipad pro)就不行了，大佬有测试过吗？

开发者平台调试效果：

开发者工具

真机效果：

ps: android真机是ok的。

lingxiaoyi commented 5 years ago

navBar 默认的配置也不出来吗?不要用你的.search设置

yicm commented 5 years ago

默认配置有，但是我的目的是想有Swiper的背景图片

lingxiaoyi commented 5 years ago

Swiper的背景图片和导航条有关系吗,你要放哪里?

yicm commented 5 years ago

        <!--  搜索框固定在顶部，下层是Swpier，也就是navBar的背景是共用Spwier的 -->
        <view class="search">
            <navBar searchBar="{{true}}" background="{{searchBGColor}}" bindsearch='search' />
        </view>
        <!-- 头部背景区 -->
        <view class="header-logo">
            <swiper catchtap='onSwiperTap' class="swiper" 
        ......

如上面的开发者平台效果截图所示。

lingxiaoyi commented 5 years ago

那你直接把头部北背景色设置透明不行吗

yicm commented 5 years ago

就是啥都不设置吗？background="" 这样？这跟设置background没关系，是设置Swpier的位置，跟searchcss class有关，Swpier会在navBar的下面，而不是与最顶部对齐了。

lingxiaoyi commented 5 years ago

background 设置rgba(0,0,0,0)试试

yicm commented 5 years ago

额目的不是navBar的背景，这是次要的，主要是将navBar放于顶层，共享navBar的背景。

lingxiaoyi commented 5 years ago

背景颜色和swiper图片一样?

yicm commented 5 years ago

对的，应该这么说，就是Swiper的图片，共享，我之前尝试过截取Swiper的上面部分图片，将其设置成背景，但是有个问题，ios平台上可以下拉的，下拉会出现一个背景区，这样就将navBar和swiper隔开了，很不好看，强迫症。。这个不是很好的办法

lingxiaoyi commented 5 years ago

swiper变换了你主动修改组件里背景颜色,我明白你的意思了 https://github.com/lingxiaoyi/navigation-bar/issues/5

lingxiaoyi commented 5 years ago

你看这个问题,他是这么解决的

yicm commented 5 years ago

不是他这种，他这种还比较好控制，只是改变navBar的背景而已，还有navTextStyle的颜色。。

lingxiaoyi commented 5 years ago

那你好好研究一下,看看问题具体出在哪里..

yicm commented 5 years ago

具体动态效果可以看这个： http://note.youdao.com/noteshare?id=448e71f04c8e8bba92975730532f5374&sub=5EAB31AC1EDD46A7B5F267189D4FA108 只是真机出问题了，好来问你下，毕竟你开发了这个组件，细节比较清楚，可能哪里有影响。。

lingxiaoyi commented 5 years ago

你那种写法实在解决不了就把标红这行代码注释了试试

yicm commented 5 years ago

注释掉了，不行。。

lingxiaoyi commented 5 years ago

注释掉了你那个外层元素也要去掉,我这个组件高度就这个东西撑起来的

lingxiaoyi commented 5 years ago

实在不行你多尝试研究一下,这种都不算什么问题,问题不一定是组件出现的,也有可能是微信自身样式显示和普通的html是不一样的

yicm commented 5 years ago

有可能是个bug...毕竟开发者工具仿真没有问题。。

lingxiaoyi commented 5 years ago

因为ios Android和开发工具用的底层代码都是不一样的,一样的嵌套组件写法,真机表现形式很可能会出现不同,这种问题最好多测试,多调试就能找到办法解决了

yicm commented 5 years ago

嗯在尝试，只是目前没有多少效果。。