【小程序】小程序使用vant Weapp的popup时，设置position:fixed无效的问题

最近要实现是一个筛选的pop，用了有赞的popup组件，初始绘制时如下，没有问题

滑动的时候发现，底部用的fixed无效，会随着pop的页面一起滚动。

看了下原因和解决方案，大多都是前端H5，借鉴各位大佬的思路。

解决思路如下：设置pop高度为屏幕高度windowHeight（去除手机通知栏和小程序标题栏），pop里面分为中间middleView和底部bottomView两部分，底部bottomView指定高度bottomHeight，设置中间middleView的高度middleHeight=windowHeight-bottomHeight。编译运行，啪啪打脸。

pop虽然设置了高度，但是页面超出了范围，设置的高度其实就没什么用了。

所以在pop的custom-style里面设置overflow：hidden，在middleView的style里面设置scroll。

okk。

代码就很简单了。

 wxml里面。

<van-popup show="{{ showRightPop }}" bind:close="onClose" position="right" custom-style="width:85%;display:flex;flex-direction:column;height:{{windowHeight}}px;overflow:hidden">
</van-popup>

 <view class="middleView" style="height: {{middleHeight}}px;overflow: scroll;display: flex;flex-direction: column;">
</view>

js里面。 

        let windHeight = wx.getSystemInfoSync().windowHeight;
        this.setData({
            middleHeight: windHeight - 100,
            windowHeight: windHeight
        })
       

本次分享到此结束。 

2023.12.21补充

试了一下把pop和mid里面的height去掉，发现也是可以的，所以解决这个问题的关键就在于给pop设置hidden，给mid设置auto或者scroll。不过这样就需要在mid里面加一个margin-bottom，不然显示不全，或者加一个空白view设置高度。

欢迎大家批评指正。