微信小程序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
   })    

},

　　

原創內容，轉載請注明出處。