微信小程序> 微信小程序textarea爬坑整理

微信小程序textarea爬坑整理

浏览量:3020 时间: 来源:浮光掠影ll

1.手机端placeholder属性会随页面滚动

由于我整个页面要大于手机视窗,于是我设置了overflow:hidden属性,但是textarea里的placeholder中的文字依然会随着屏幕滑动。

解决方法 在textarea中设置fixed='true’属性

2.textarea层级在最上层,z-index无效

这个问题应该很多人都遇到了,目前也没有特别完美的解决办法,目前主流的两种解决方法。

解决方法 1. 使用cover-view标签

cover-view可以覆盖在原生组件上层,而且使用起来也很简单,并不用修改JS,但是由于它只支持嵌套cover-view、cover-image(可在cover-view中使用button)。如果希望在顶层显示的view中有其他标签
那这个方法就行不通了。

2.使用JS修改

通过新建一个text标签,把他的样式设置成和textarea相同的,位置也相同,然后通过焦点的聚集和失去事件来控制text与textarea的显示隐藏,text标签并不是原生组件,因此不会显示在最上层,具体的我借助代码说明。

小程序
wx:if----判断值为true时显示,值为false时隐藏。isShowTextare 初始值设置为true
focus----控制textarea自动捕获焦点。onFocus 初始值设为true
bindblur----绑定失去焦点事件onShowText

onShowText: function(e){     this.setData({       isShowTextarea: false,       onFocus: false     })  },//显示text

bindinput----绑定输入事件textchange

 textchange: function (e) {       this.setData({      text: e.detail.value,    })  },//获取textarea中的值,以便传入text中

bindtap----绑定text点击事件onShowTextarea

onShowTextarea() {          this.setData({      isShowTextarea: true,      onFacus: true    })  }, //显示textare

然而这种方法有一个问题就是在切换text在切回textarea后需要点击两次才可以输入。

之后的测试过程中发现,wx:if会导致value传值失败,undefined,解决办法用hidden代替wx:if

参考https://blog.csdn.net/qq_38307825/article/details/81241301

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎