因公司業(yè)務(wù)需求：需要布局一個(gè)頁面是底部一張圖片position：fixed；z-index= -1固定在底部，然后上面一個(gè)html文件可上下拖動(dòng)做到視覺差，手動(dòng)寫一個(gè)彈窗后底部內(nèi)容還是可以滾動(dòng)，因?yàn)閺棿袄锩娴膬?nèi)容有textarea，textarea的placeholder會(huì)根據(jù)屏幕的滾動(dòng)而滾動(dòng)，這就賊嚇人了，找了各種方法，給最外層套個(gè)view設(shè)置overflow：hidden，position：relative會(huì)導(dǎo)致頁面滾動(dòng)到頂部，確實(shí)不會(huì)滾動(dòng)了。但是頁面滾動(dòng)到頂部這個(gè)效果就不太好了，用戶滾動(dòng)到底部了 然后一個(gè)彈窗彈起，又把頁面滾動(dòng)到頂部了，所以這種效果是不行的。
后來嘗試在瀏覽器調(diào)試給page加上overflow：hidden發(fā)現(xiàn)可行，比如彈起的時(shí)候給page加上overflow：hidden，隱藏的時(shí)候去掉，
但是官方并沒有給我們操作page的方法。
最后嘗試了各種方法，找到了一個(gè)好東西

catchtouchmove="preventTouchMove"

<view class="quickApply" wx:if="{{isVisible}}">
  <view class="shadow" catchtouchmove="preventTouchMove"></view> <-- 給你的彈窗加上這個(gè)東西，他會(huì)阻止頁面滾動(dòng) -->
  <view class="content">
    <view class="head-info">
      <view class="close" bindtap="handleCloses">
        <image mode="widthFix" src="https://ojlf2aayk.qnssl.com/Combined%20Shape@2x.png"></image>
      </view>
      <text class="title">填寫報(bào)名信息</text>
    </view>
    <view class="form">
      <view class="viewul">
        <view class="viewli">
          <view class="text">聯(lián)系電話</view>
          <input type="tel" placeholder="請(qǐng)輸入您的手機(jī)號(hào)" placeholder-class="phcolor" maxlength="11" bindinput="getPhonelg" cursor-spacing="40px"/>
        </view>
        <view class="viewli" >
          <view class="text">驗(yàn)證碼</view>
          <input type="tel" placeholder="短信驗(yàn)證碼" placeholder-class="phcolor" maxlength="6" bindinput="handleUserInfo" />
          <view class="{{verifyDisabled ? 'disabled-btn' : 'btn'}}" bindtap="getverificode">{{btnText}}</view>
          <view class="shortline"></view>
        </view>
        <view class="viewli" >
          <view class="text">姓名</view>
          <input type="text" placeholder="請(qǐng)?zhí)顚懩男彰? placeholder-class="phcolor" value="{{name}}" bindinput="handleName"/>
        </view>
        <view class="viewli" >
          <view class="text">留言</view>
          <input type="text" placeholder="留言錄取比例提高15%（選填）" placeholder-class="phcolor" maxlength="140" bindinput="handleCount" />
          <view class="countNum">{{countNum}}/140</view>
        </view>
      </view>
    </view>
    <view class="apply {{isDisabled ? 'btn-disabled' : ''}}" bindtap="quickApply">極速報(bào)名</view>
  </view>
</view>

preventTouchMove () {}

為什么是空方法？因?yàn)橐Y(jié)合界面wxml看，蒙層view里有一個(gè)事件綁定catchtouchmove="preventTouchMove"。這樣寫的原因是阻斷事件向下傳遞，避免在彈窗后還可以點(diǎn)擊或者滑動(dòng)蒙層下的界面。如果不這樣寫的話，如果主界面是一個(gè)可以滾動(dòng)的界面，想想看，當(dāng)彈窗彈出的時(shí)候用戶還可以操作滾動(dòng)列表，我想你的產(chǎn)品經(jīng)理會(huì)來找你的。
好了大家有什么問題歡迎郵件15723405987@163.com或者QQ8662054

青團(tuán)社招聘：

招聘崗位：高級(jí)前端開發(fā)工程師P5及以上

簡歷投遞到：hr@qtshe.com || haochen@qtshe.com

職位描述：

1、建設(shè)工具、提煉組件、抽象框架，促進(jìn)前端工程化、服務(wù)化，持續(xù)提升研發(fā)效率，保障線上產(chǎn)品質(zhì)量

2、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)，指導(dǎo)落實(shí)解決方案

3、持續(xù)優(yōu)化前端頁面性能，維護(hù)前端代碼規(guī)范，鉆研各種前沿技術(shù)和創(chuàng)新交互，增強(qiáng)用戶體驗(yàn)、開拓前端能力邊界

作者：一個(gè)被床封印的程序猿
鏈接：http://m.itdecent.cn/p/9a1c91e1e435
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。