我表示这个标题有点彪！！！因为写小程序我也是新手阵营里面的选手， 言归正传，关于这个问题也一直困扰着我，自己在用微信开发工具中都没有什么问题，但是在ios真机里面测试时发现bug,如下图：
图片压缩过，请大家忽略水印
我用mavue框架做的是一个是外卖购物车这样的一个功能，发现滑动里面的商品列表的时候，主页面的内容区块也在跟着滑动。
首先想到的就是用网页的解决方式给解决掉；给最外层设置 height:100%;，overflow:hidden; 立马打脸，发现不行，我又试了试 style绑定的方式， style=“height:{{isheight}};overflow:{{isoverflow}};”，点击显示弹窗的时候就设置this.isheight= 100%;this.isoverflow=hidden;弹窗隐藏的时候就还原样式，但是还是不行，当时就觉得有点坑爹了，忍不住还是百度了一下，发现还是有类似的问题发生，直到看到了@喜欢摄影的developer 同学的文章，放佛拉住了记忆中的稻草。如图：（这是他的解决方法，就是利用scroll 打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动）
@喜欢摄影的developer
他是这样解决了，但是我发现，我的并没有解决。
2.折腾了很久，发现是滚动事件穿透，不断的翻手册找答案。
3.解决方法
给弹窗遮罩加上 @touchmove.stop = 'move' ， move(){ return false } ,加上后发现列表不能滚动了，灵机一动想着给列表用scroll-view标签包起来，就解决了。如图：
图片压缩过，请大家忽略水印
下面是局部代码：
布局代码
以上就是解决我解决弹窗滑动冲突的代码，如有帮到各位还请点个赞，有疑问请留言，感谢@喜欢摄影的developer同学的思路。
网友评论