微信小程序 textarea 层级过高问题简单解决方案

这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码

<template>
  <view class="ui-textarea">
    <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{ txt }}" placeholder="{{ placeholder }}" bindinput="onInput" bindblur="onBlur" focus="{{focus}}"></textarea>
    <view hidden="{{ hide == false }}" class="{{ txt === ''?'text placeholder':'text'}}" bindtap="onFocus">{{ txt ===''? placeholder:txt }}</view>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {}
  },
  behaviors: [],
  properties: {
    placeholder: {
      type: String,
      value: ''
    },
    maxlength: {
      type: Number,
      value: 128
    },
    name: String,
    value: {
      type: String,
      value: ''
    }
  },
  data: {
    hide: true,
    txt: '',
    focus: false
  },
  ready() {
    if (this.data.value != '') {
      this.setData({ txt: this.data.value })
    }
  },
  methods: {
    onFocus() {
      this.setData({ hide: false, focus: true })
    },
    onInput(e) {
      this.setData({ txt: e.detail.value })
    },
    onBlur() {
      this.setData({ hide: true, focus: false })
    }
  }
}
</script>
<style lang="less">
.ui-textarea {
 position: relative !important;

 .textarea.hidden {
  display: block !important;
  position: absolute !important;
  left: -999px;
  right: -999px;
  top: 0;
 }

 .textarea {
  width: 100%;
  box-sizing: border-box;
 }

 .text {
  height: 100%;
  padding: 6px 5px;
  font-size: 14px;
 }

 .placeholder {
  color: #888;
 }
}
</style>

Vue 代码,自己根据需求改一下 ,特别注意,不要用 wx;if 或者 hidden 属性 , wx:if 频繁渲染,虽然可以用,hidden 会出现 部分显示bug,[hidden] 会使auto-height 首次不正确

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现分享商品海报功能

    我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀该成对应框架前缀即可:) 步骤描述不清晰或者不想看步骤?那就直接访问完整代码地址吧 完整代码演示:微信小程序 - 分享商品海报 相关文档: uni-app官方文档 微信小程序官方文档 第一步:提前将需要分享的图片素材先缓存至本地临时图片路径: initPic(){ this.handleNetImg

  • 微信小程序自定义tabBar在uni-app的适配详解

    微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • 微信小程序 textarea 详解及简单使用方法

    微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值, 解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: <form bin

  • 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view

  • 微信小程序textarea层级过高的解决方法

    一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格 针对以上两种业务

  • 微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    前言:这篇文章讲什么 微信小程序中 textarea 组件的层级过高如何解决 前言:这篇文章对谁有用 微信小程序开发者 前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴.或者是做成一个组件然后开源) 前言:本文时效性 截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高.无法通过 z-index 进行调整.在微信小程序官方把 textarea 改成了可以控制层级之前.本文中的内容会一直有效.

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

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

    前言 由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <view class='bar bottomfix shadow justify-center'> <button class='' formType="submit" type="primary" style='font-size:12pt

  • 微信小程序 textarea 组件详解及简单实例

    微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名 类型 默认值 说明 value String   输入框的内容 placeholder String   输入框为空时占位符 placehold

  • 微信小程序 textarea 层级过高问题简单解决方案

    这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码 <template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-he

  • 微信小程序 picker-view 组件详解及简单实例

    微信小程序 picker-view 组件详解及简单实例

    picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number Array   数组中的数字依次表示 picker-view 内的 picker

  • 微信小程序 input输入框详解及简单实例

    微信小程序 input输入框详解及简单实例

    微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型,

  • 微信小程序 picker 组件详解及简单实例

    微信小程序 picker 组件详解及简单实例

    微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器 普通选择器:mode=

  • 微信小程序 label 组件详解及简单实例

    微信小程序 label 组件详解及简单实例

    微信小程序label 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件. for优先级高于内部控件,内部有多个控件的时候

  • 微信小程序 Button 组件详解及简单实例

    微信小程序 Button 组件详解及简单实例

    微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样

随机推荐