小程序模板網(wǎng)

微信小程序滾動(dòng)穿透問題

發(fā)布時(shí)間：2018-01-24 11:05 所屬欄目：小程序開發(fā)文檔

做小程序項(xiàng)目遇到一個(gè)項(xiàng)目，就是點(diǎn)一個(gè)按鈕出現(xiàn)一個(gè)蒙層，然而下面的頁(yè)面還是可以滾動(dòng)，解決如下： view bindtap="hideCoupon" class='coupon_receive_wrapper {{showCouponFlag==true?"active":""}}' catchtouchmov ...

 
 
 
 做小程序項(xiàng)目遇到一個(gè)項(xiàng)目，就是點(diǎn)一個(gè)按鈕出現(xiàn)一個(gè)蒙層，然而下面的頁(yè)面還是可以滾動(dòng)，解決如下： 
<view bindtap="hideCoupon" class='coupon_receive_wrapper {{showCouponFlag==true?"active":""}}' catchtouchmove="preventD">

 

樣式如下 ：

.coupon_receive_wrapper{
  display:none;
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  z-index:11;
  transition: all 1s ease;
}
.coupon_receive_wrapper.active{
  display:block;
}

給蒙層那個(gè)元素加個(gè)touchmove事件，這個(gè)事件用來(lái)阻止事件冒泡，preventD中的代碼如下：preventD(){}問題就解決了。



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址：http://22321a.com/wxmini/doc/develop/19628.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢