微信小程序scroll-view滚动条冲突解决办法

在弹窗的页面有Scroll-view，会造成与主页面滚动条冲突。

解决办法如下

原index.wxml

<view>
　　主内容
</view>

<scroll-view scroll-y>
　　弹框内容
</scroll-view>

 

改动如下

index.json

{
  "disableScroll":true //禁用原滚动条
}

 

index.wxml

<!--替换掉原来的view,用程序控制滚动条-->
<scroll-view scroll-y={{scroll}}>
  主内容
</scroll-view>
<scroll-view scroll-y>
  弹框内容
</scroll-view>

　　

index.js

showDialog:function(e){
   //显示弹框时，禁用主页面滚动条
   this.setData({
       scroll:false
   })    
},

hideDialog:function(e){
   //关闭弹框时，启动主页面滚动条
   this.setData({
       scroll:true
   })    

},

　　

原创内容，转载请注明出处。