1、需求:
公司的一个小程序,在列表界面弹窗显示详细的进度信息,类似客户端APP的alert弹窗,只是里面的内容不一样
2、遇到的问题:
使用fixed定位之后,滑动弹出的视图,发现根页面page也跟着滑动,
3、解决问题:
刚开始查看了官方文档,也在网上找了些资料,还是没有发现好的解决的方式,最后居然被我试出来了
解决方式如下:
1、弹窗背景使用fixed定位,占满全屏,设置半透明
2、设置弹窗最上层view的属性catchtouchmove=“方法名”,这里的方法完全是为了消除控制台的警告,可不做处理。
3、在弹窗里面具体显示的内容使用scroll-view,并注意设置scroll-view的高度
4、再给scroll-view设置属性scroll-y,就可以了。(ps:切记一定要设置scroll-y,否则将不会起任何效果,导致scroll-view不能滑动)
具体示例代码如下:
<!-- 筛选界面展示区域 -->
<view class='filterContainer' hidden="{{!topTabBarIsOpen}}" bindtap='filterViewTapAction' catchtouchmove='filterViewMove'>
<scroll-view scroll-y class='filterDataView'>
<view class='filterItemBg' wx:for="{{showList}}" wx:key="title" data-selectdata="{{item}}" data-selectindex="{{index}}" catchtap='itemSelectedAction'>
<text class="{{showListSelectIndex == index ? 'itemSelected' : 'itemNormal'}}">{{item.name}}</text>
</view>
</scroll-view>
</view>
具体样式就不贴出来了
最后效果如下,因为使用了catchtouchmove,这里需要在真机上才能测试效果,到此,解决了小程序弹窗,page页面也跟着滑动的问题。