微信小程序> 小程序中textarea自适应高度的问题

小程序中textarea自适应高度的问题

浏览量:679 时间: 来源:张文琪

在学习小程序过程,在textarea的使用上,碰到过两个问题,这里分享一下:


一、设置style里的height属性无效
解决方法:

/*XXX.wxss*/page{  height: 100%;}/*也就是把当前页面高度设置100%*/

这个不仅仅是设置textarea高度时会出现,其他的一些组件也会有这个问题,都可以试试这个方法


二、设置textarea自适应高度,输入过长内容且textarea失去焦点后,高度会变小,使得用户体验较差
解决方法:

/*XXX.wxml*/textarea auto-height="{{auto_height}}" bindblur='areablur' bindfocus='areafocus'//*XXX.wxss*/textarea {    height: 30px;}/*设置合适高度作为默认高度*//*XXX.js*/...data: {     auto_height:true    //当textarea获取焦点时自适应高度,失去焦点时不自适应高度    //自适应高度时,style中的height无效  },...areablur:function(){    this.setData({      auto_height:false    })  },  areafocus:function(){    this.setData({      auto_height: true    })  }

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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