一步快速解决微信小程序中textarea层级太高遮挡其他组件

 更新时间:2019年03月04日 11:16:57   作者:huobox  
这篇文章主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示:


<view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</view>

网上有一些绕弯路的解决办法,其实小程序有一个直接解决原生组件覆盖问题的办法,就是使用cover-view,小程序为了解决原生组件层级最高的限制。小程序专门提供了 cover-view cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

上方覆盖部分改为如下即可:

<cover-view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</cover-view>

效果如下,动手试试吧!

到此就解决了遮盖问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 浅谈几种常用的JS类定义方法

    浅谈几种常用的JS类定义方法

    下面小编就为大家带来一篇浅谈几种常用的JS类定义方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript实现网页tab栏效果制作

    JavaScript实现网页tab栏效果制作

    这篇文章主要为大家详细介绍了JavaScript实现网页tab栏效果制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js实现飞机大战小游戏

    js实现飞机大战小游戏

    这篇文章主要为大家详细介绍了js实现飞机大战小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Javascript实现滚动图片新闻的实例代码

    Javascript实现滚动图片新闻的实例代码

    这篇文章主要介绍了Javascript实现滚动图片新闻的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • ES6中参数的默认值语法介绍

    ES6中参数的默认值语法介绍

    这ES6允许为函数参数设置默认值,即直接写在参数定义后面。下面篇文章主要介绍了ES6中参数默认值语法的相关资料,对大家具有一定的参考价值,需要的朋友下面来一起看看吧。
    2017-05-05
  • JavaScript模板入门介绍

    JavaScript模板入门介绍

    我最开始写过一个富交互的页面,其中的JavaScript代码包含了很多html标签
    2012-09-09
  • JS性能优化笔记搜索整理

    JS性能优化笔记搜索整理

    在网上搜索了下关于性能优化方面的内容,现简单整理可供大家在优化过程中使用,感兴趣的额朋友可以了解下
    2013-08-08
  • 浅谈Javascript事件对象

    浅谈Javascript事件对象

    本文主要介绍了Javascript事件对象的相关实例。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS调用某段SQL语句的方法

    JS调用某段SQL语句的方法

    这篇文章主要为大家详细介绍了通过JS调用某段SQL语句的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript Map实现原理与底层结构详解

    JavaScript Map实现原理与底层结构详解

    哈希表(也称为哈希表)是一种基于键直接访问内存存储位置的数据结构。也就是说,它通过计算一个键值函数来加速查找,该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数,记录数组称为散列表
    2022-09-09

最新评论