编程语言
首页 > 编程语言> > 微信小程序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
   })    

},

  

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

 

标签:index,微信,弹框,滚动条,内容,scroll,页面
来源: https://www.cnblogs.com/ideahead/p/16116353.html