微信公众号开发

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

本文主要是介绍微信小程序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
   })    

},

　　

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

 

这篇关于微信小程序scroll-view滚动条冲突解决办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航