亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網
    最全最豐富的資訊網站

    淺析小程序中textarea層級過高穿透問題的解決方案

    小程序中怎么解決textarea層級過高穿透問題?下面本篇文章給大家介紹一下微信小程序通過cover-view解決textarea層級過高穿透問題的方法,希望對大家有所幫助!

    淺析小程序中textarea層級過高穿透問題的解決方案

    自從做小程序以來,就遇到了好多坑,其中一個就是textarea層級過高,會穿透其他層次,這時候用z-index也是不管用的。 官方是這么說的: >小程序框架為了優(yōu)化體驗,部分組件如map、video、textarea、canvas通過原生控件實現,原生組件層級高于前端組件,為了能正常覆蓋原生組件,設計了cover-view。

    所以說用cover-view就可以了,但是在用cover-view的時候也有好多坑,這就導致使用cover-view會不起作用或者cover-view里的組件也不顯示了,接下來我就描述一下我已經實現好的方案,希望能幫到大家。 我這邊的需求是底下有個提交按鈕,但是上面的textarea會穿透過提交按鈕,體驗很不好。【相關學習推薦:小程序開發(fā)教程】

    一開始我是這邊寫的:

    <cover-view><view>提交</view></cover-view>

    也是看了好多博文說這些寫真機上不顯示,我這邊也是這樣,后來才發(fā)現了報錯信息。

    淺析小程序中textarea層級過高穿透問題的解決方案

    后來我就把代碼變成了這樣:

    <cover-view> 	<button>提交</button> </cover-view> // 樣式 button{ 	position: fixed; 	bottom: 0rpx; 	margin: auto; 	width: 100%; 	height: 37px; 	background-color: #0090FF; 	color: #FFFFFF; 	font-size: 34rpx; 	line-height: 37px; 	text-align: center; }

    但是這樣依然不顯示:通過給cover-view加背景顏色調試,發(fā)現cover-view沒有高:

    好使的版本:

    <cover-view> 	<button>提交</button> </cover-view> // 樣式 button{ 	position: fixed; 	bottom: 0rpx; 	margin: auto; 	width: 100%; 	height: 37px; 	background-color: #0090FF; 	color: #FFFFFF; 	font-size: 34rpx; 	line-height: 37px; 	text-align: center; } cover-view{ 	height: 37px; 	position: fixed; 	bottom: 0; 	width: 100%; 	z-index: 9999; }

    所以是要給cover-view加樣式啊….

    總結: 如果你cover-view中的代碼不顯示 1、看看你里面是不是用的view;view組件會在真機上不顯示; 2、即使用了cover-view,也需要在cover-view中加入z-index;等一些樣式。

    如果你的代碼還是不顯示,可以先給cover-view加一個背景顏色、高度、寬度,來調試一下是不是cover-view不顯示。然后再接著看cover-view你的代碼顯示不顯示,一層一層來調試,看看原因出現在哪里。

    贊(0)
    分享到: 更多 (0)
    網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號