欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序input、textarea層級過高穿透的問題解決

 更新時間:2021年11月25日 09:51:34   作者:A_山水子農(nóng)  
微信小程序原生組件camera、canvas、input、live-player、live、pusher、map、textarea、video的層級是最高的,那么如何解決微信小程序input、textarea層級過高穿透,本文就詳細的介紹一下

??微信小程序原生組件camera、canvas、input(僅在focus時表現(xiàn)為原生組件)、live-player、live、pusher、map、textarea、video的層級是最高的,頁面中的其他組件無論設(shè)置 z-index 為多少,都無法蓋在原生組件上。

在這里插入圖片描述

在這里插入圖片描述

從圖中效果可以看出input輸入的內(nèi)容穿透到了選擇列表自定義組件,解決辦法:
1、使用if,當觸發(fā)選擇列表時隱藏input或textare組件,選擇完成點擊確認關(guān)閉選擇列表,顯示input或textare。
2、選擇列表自定義組件使用 cover-view 和 cover-image 組件代替view和image,cover-view 和 cover-image 組件,可以覆蓋在部分原生組件上面。

<cover-view class="cover-view" style="{{height}}" wx:if="{{isShowModel}}">
    <cover-view class="selectModel">
      <cover-view class="model" @tap="onShowOrHideModel()"></cover-view>
      <cover-view class="modelBox">
        <cover-view class="title">{{title}}(可多選)</cover-view>
        <cover-view class="list">
          <block wx:for="{{waitClassifyNamesList}}" wx:key="{{index}}">
            <cover-view class="li" @tap="onClickSelect({{item.optionCode}})">
              <cover-image wx:if="{{filter.isInclude(item.optionCode,classifyIds)}}" class="icon" src="/image/signatory/selected.png"></cover-image>
              <cover-image class="icon" src="/image/signatory/unSelect.png" wx:else></cover-image>
              <cover-view class="name">{{item.optionName}}</cover-view>
            </cover-view>
          </block>
        </cover-view>
        <cover-view class="btn" @tap="onSubmitSelectService">確認</cover-view>
      </cover-view>
    </cover-view>
  </cover-view>

在這里插入圖片描述

兩種方式的實現(xiàn)效果如上圖,至于選擇何種方式,根據(jù)實際需求來選擇。

到此這篇關(guān)于微信小程序input、textarea層級過高穿透的問題解決的文章就介紹到這了,更多相關(guān)小程序input、textarea穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • js處理xml文件方法示例詳解

    js處理xml文件方法示例詳解

    這篇文章主要為大家介紹了js處理xml文件方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • javascript動畫之模擬拖拽效果篇

    javascript動畫之模擬拖拽效果篇

    其實javascript本身是具有原生拖放功能的,但是由于兼容性問題,以及功能實現(xiàn)的方式,用的不是很廣泛。javascript動畫廣泛使用的還是模擬拖拽。本文將詳細介紹javascript的模擬拖拽,有需要的可以參考借鑒。
    2016-09-09
  • JS中arguments的使用示例

    JS中arguments的使用示例

    本文主要介紹了JS中arguments的使用示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • 小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字

    小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字

    這篇文章主要為大家詳細介紹了小程序云開發(fā)教程,如何實現(xiàn)圖片上傳及發(fā)表文字,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • JavaScript基于ajax編輯信息用法實例

    JavaScript基于ajax編輯信息用法實例

    這篇文章主要介紹了JavaScript基于ajax編輯信息用法,涉及javascript基于Ajax操作鼠標事件及實時保存文本的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】

    JS常見DOM節(jié)點操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】

    這篇文章主要介紹了JS常見DOM節(jié)點操作,結(jié)合實例形式分析了JavaScript針對DOM節(jié)點的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
    2018-05-05
  • 3分鐘教你用JavaScript實現(xiàn)電子簽名效果

    3分鐘教你用JavaScript實現(xiàn)電子簽名效果

    電子簽名已經(jīng)成為現(xiàn)代商業(yè)中不可或缺的一部分,它可以提高業(yè)務(wù)流程的效率和安全性。本文將介紹如何使用HTML5的canvas元素和JavaScript在前端實現(xiàn)電子簽名,需要的可以參考一下
    2023-04-04
  • 詳解JavaScript的流程控制語句

    詳解JavaScript的流程控制語句

    這篇文章主要介紹了JavaScript的流程控制語句,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 理解javascript中的嚴格模式

    理解javascript中的嚴格模式

    這篇文章主要幫助大家理解javascript中的嚴格模式,何為嚴格模式,如何啟用嚴格模式,感興趣的小伙伴們可以參考一下
    2016-02-02
  • 如何使用Javascript中的this關(guān)鍵字

    如何使用Javascript中的this關(guān)鍵字

    本文介紹了如何使用Javascript中的this關(guān)鍵字,文中代碼簡單易懂,對大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下
    2020-05-05

最新評論