小程序模板網(wǎng)

微信小程序解決自定義彈出層滑動(dòng)時(shí)下層頁面滾動(dòng)問題

發(fā)布時(shí)間:2021-06-16 08:57 所屬欄目:小程序開發(fā)教程

彈出 fixed 彈窗后,在彈窗上滑動(dòng)會(huì)導(dǎo)致下層的頁面一起跟著滾動(dòng)。

場景一:彈窗內(nèi)無滾動(dòng)內(nèi)容

可以在彈窗最外層元素綁定touchmove事件,觸發(fā)事件返回false即(在vue類框架中也可以加.stop阻止冒泡)。

簡單寫法:catchtouchmove='preventTouchMove',在js文件中定義一個(gè)方法preventTouchMove() { return } 即可。

此種方式會(huì)阻止彈窗內(nèi)內(nèi)容的滾動(dòng)。

場景二:彈窗內(nèi)有滾動(dòng)內(nèi)容

在彈窗外層根元素動(dòng)態(tài)添加一個(gè)no-scroll樣式,定義no-scroll為{height: 100%; overflow: hidden;}

當(dāng)需要阻止滑動(dòng)的彈窗顯示時(shí)添加no-scroll,彈窗關(guān)閉去掉no-scroll即可。

此種方式的缺點(diǎn)是當(dāng)彈窗顯示增加no-scrll后彈窗下面的頁面會(huì)回到頂部。

場景三:

WXML
將整個(gè)底層頁面使用 scroll-view 包裹起來,設(shè)置 scroll-y 當(dāng)顯示彈出層的時(shí)候?yàn)?true, 閉關(guān)彈出層的時(shí)候?yàn)?false
<scroll-view scroll-y="{{showModalStatus?'true':'false'}}" style="height:{{windowHeight}}px"
> </scroll-view>

  WXSS

 Page 設(shè)置為絕對定位,寬高各百分之百 , scroll-view 高度 百分之百


Page{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  overflow-y: hidden;
}
.scroll-view {
  height: 100%;
}

  JS

data {
  windowHeight: wx.getSystemInfoSync().windowHeight,
   showModalStatus: false
},

 JS 控制 showModalStatus 的開關(guān)。  

 不過這引入了新的問題,無法觸發(fā) onReachBottom  頁面上拉觸底和下拉刷新事件的處理函數(shù)

 不介意的話可以使用 scroll-view 的 bindscrolltolower 進(jìn)行解決 bindscrolltolower 方法觸發(fā) onReachBottom(), 用scroll-view 的bindscrolltoupper進(jìn)行解決 bindscrolltoupper方法觸發(fā)onPullDownRefresh()

 WXML

<scroll-view bindscrolltolower='bindscrolltolower'
               bindscrolltoupper='bindscrolltoupper'
        scroll-y="{{showModalStatus?'true':'false'}}" style="height:{{windowHeight}}px"
> </scroll-view>

  JS

data {
  windowHeight: wx.getSystemInfoSync().windowHeight,
},
bindscrolltolower:function(){
  console.log('bindscrolltolower')
  var page = getCurrentPages().pop()
  console.log(page)
  page.onReachBottom()
},
 bindscrolltoupper: function () {
   let page = getCurrentPages().pop()
   page.onPullDownRefresh()
 },


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