2. 程式人生 > >小程式彈出的遮罩只有一屏高度，滾動顯示出下面的UI

小程式彈出的遮罩只有一屏高度，滾動顯示出下面的UI

阿新 • • 發佈：2019-02-13

問題：彈出的遮罩，由於沒有處理小程式的滾動擊穿，在遮罩下的滾動檢視如果很長，則滑動頁面，遮罩也滾動，沒有全屏。

解決辦法：將遮罩的高度設定為滾動頁面內容的高度。

步驟：需要獲取滾動頁面的高度，獲取螢幕的高度。如果滾動內容的高度大於螢幕高，則設定遮罩style高度為滾動內容的高度，否則設定為螢幕高度。

獲取高度的程式碼：

.js

calculateScrollViewHeight() { let that = this; let query = wx.createSelectorQuery(); query.select('#scrollview').boundingClientRect
(); query.selectViewport().scrollOffset(); query.exec(function (res) { let height = res[0].height; wx.getSystemInfo({ success: function (res) { let mainHeight = height>res.windowHeight?height:res.windowHeight that.setData({ mainHeight }) } }); }); },
在彈出遮罩的方法中，呼叫此方法
this.calculateScrollViewHeight();

.wxml

<view class = "mainPage" id = "scrollview">
最後，在需要設定高度的地方使用：height:{{mainHeight}}px


相關推薦

小程式彈出的遮罩只有一屏高度，滾動顯示出下面的UI

問題：彈出的遮罩，由於沒有處理小程式的滾動擊穿，在遮罩下的滾動檢視如果很長，則滑動頁面，遮罩也滾動，沒有全屏。解決辦法：將遮罩的高度設定為滾動頁面內容的高度。步驟：需要獲取滾動頁面的高度，獲取螢幕的高度。如果滾動內容的高度大於螢幕高，則設定遮罩style高度為滾動內容的高度，

JS彈出遮罩層後底部頁面不滾動實現

在我們開發過程中，經常會遇到這樣的問題，在頁面上彈出一個彈層，但是底部頁面卻可以滾動，本文實現JS彈出遮罩層後底部頁面不滾動效果。首先效果如圖，這裡我們需要點選頁面頭部一個按鈕才出現彈層，這裡是彈層出現後底部頁面滑動到下面的效果圖： 這裡只需CSS就可實現

微信小程式彈出和隱藏遮罩層動畫以及五星評分

<view class='train_con'> <view class='head'> <text>{{bankname}}</text> <text class='count'>{{index+1}}/{{allquestion.leng

微信掃一掃打開網址彈出遮罩提示用戶在外部瀏覽器中打開

blank class src 無法 webp shu 方案 打開 圖片顯示 在微信裏無法打開下載鏈接，而在瀏覽器中卻可以。通過google 發現，原來是微信屏蔽了內置瀏覽器的下載功能。那麽有沒有解決辦法呢？ 肯定是有的。 解決方案：彈出一個遮罩，提示用戶在瀏覽器中打開進行

微信掃一掃點選下載連結彈出遮罩提示使用者在外部瀏覽器中開啟

使用微信開啟網址時，無法在微信內開啟常用下載軟體，手機APP等。網上流傳的各種微信開啟下載連結，微信已更新基本失效，最新的一個是使用連結跳轉方式： http://mp.weixin.qq.com/mp/redirect?url=http://caibaojian.com/test.apk#wei

微信小程式 - 彈出鍵盤遮擋住輸入框

在開發微信小程式的時候遇到，輸入使用者名稱或者手機號以及地址，手機鍵盤調起來，會把輸入框遮擋。 如圖： 以上兩張圖是自己工作中遇到的，此處不要著急，一個屬性幫你搞定。 cursor-spacing：指定游標與鍵盤的距離，單位px或rpx，預設為px。取 input 距離底部的距離和 cursor

小程式彈出框詳解

小程式彈出框詳解 qjlx: function() { var itemList = ['病假', '事假']; wx.showActionSheet({ itemList: itemList, success: function(res) { c

微信小程式彈出層的實現（動畫）

彈出層wxml頁面結構 <view class='couponLayerBox' animation="{{animMaskData}}" style='height:{{LayerBoxHeight}};'></view> &

彈出遮罩層後，如何禁止底層頁面的滾動【轉】

彈窗是一種常見的互動方式，而蒙層則是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，我們會發現，當彈出遮罩層後，底層body的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發專案時遇到的問題。 一個小程式的專案，是用MPVUE(一個使用 Vue.js

微信網頁中點選下載連結彈出遮罩提示使用者在外部瀏覽器中開啟

html <a id="goDownload" href="http://image.jietiaozhan.com/anroid/xiaozhoudao.apk">點選下載安卓APP</a> <div class="maskWrap" id="maskWrap

.aspx頁面彈出遮罩層

實現功能：點選Repeater資料表每行的某一個按鈕，彈出遮罩層顯示“資料獲取中，請稍後.....”，後臺進行資料獲取的操作，獲取完成後，彈出相應的訊息框。 ShowAbnoramlServer.aspx頁面相關程式碼(點選Repeater表“更新”按鈕，呼叫頭部Updat

微信小程式彈出loading層的兩種方法：直接在程式碼裡控制，在wxml檔案里布局彈窗loading層，利用條件渲染，在js程式碼裡控制是否顯示loading層。

微信小程式彈出loading層的兩種方法：直接在程式碼裡控制，在wxml檔案里布局彈窗loading層，利用條件渲染，在js程式碼裡控制是否顯示loading層。  直接在程式碼裡控制 js程式碼 showLoading:function(){ wx.showToast({

微信彈出遮罩層引導使用者瀏覽器開啟升級版

相信做前端的朋友一定都遇到這種情況的、當你的網頁中有直接連結apk下載的時候會沒有反映的、是因為在微信內是無法下載軟體、手機APP等、那麼這個時候一般的解決方案就是、必須要點選右上角三個點、選擇“在瀏覽器中開啟”才可以、檢視效果，之前一直用的都是遮罩提示的 但是我們最近有了突

點選按鈕Alert彈出遮罩層效果的提示框程式碼

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>經過改善優化的Alert彈出提示效果</titl

微信小程式彈出可填寫框兩種方法

方法一：  html頁面：<view class="container" class="zn-uploadimg"> <button type="primary"bindtap="modalinput">modal有輸入框</butto

jquery 彈出遮罩層

/* 修改密碼是彈出遮罩層 */// url:傳遞aspx頁面// heigth: 彈出頁面顯示高度// width: 彈出頁面顯示寬度function frmMaks(url, heigth, width) {    $("body").append("<div class='DivMask'>

小程式 彈出動畫（分享類）

點選分享彈出一個動畫 出現分享型別 wxml: <view> <view animation="{{animationData}}" class="buydes-dialo

ArcGIS操作小技巧(一)之屬性表中顯示出小數點前面的 0

當你開啟ArcGIS屬性表，對向量進行面積或其他計算時，發現如下圖所示問題，兄弟莫方...........，接下來用兩種方法保證你滿意。      主要方法： 一、設定系統時間。 二、欄位屬性設定。 具體操作： 一、(1) 點選系統時間設定(環境

微信小程式彈框效果解析

先上程式碼 wxml部分： <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上彈起</text> </view> <

微信小程式獲取openid返回40029的一種錯誤情況

微信小程式返回40029的情況原因有很多，遇到後大概總結了幾個已知的 1.小程式裡傳到後臺的code被微信的呼叫介面使用了兩次（只能使用一次） 2.appid、AppSecret的值不對（這個自己複製感覺一般不會錯） 3.自己遇到的最難受的原因:建立專案的appid跟你請求url裡的ap