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

在学习小程序过程，在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})}

小程序中textarea自适应高度的问题相关推荐

小程序中textarea层级最高的结局办法
在小程序中textarea层级比较高,当底部有fiexd定位的时候或出现文本框中的文本穿透显示出来,解决办法是在texarea标签下面添加一个view或者text标签来和texarea标签替换使用 & ...
swiper高度自适应_小程序自定义导航自适应高度
小程序导航条自定义,高度自适应iphoneX等刘海手机和其他手机,开启导航自定义需要在app.json文件里将window的 navigationStyle属性设置为: custom,开启导航自定义可 ...
小程序中textarea点击按钮事件
textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit. <view clas ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
了解微信小程序、掌握微信小程序开发工具的使用、了解小程序的目录以及文件结构、掌握小程序中常用的组件、掌握WXML、WXSS、WXS的基本使用
1 微信小程序介绍以及开发准备 1.1 了解微信小程序百度百科: 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及&quo ...
小程序中image标签的mode属性，防止图片调整宽高而导致拉伸的问题
微信小程序中图片直接调整宽高很容易导致图片拉伸变形,达不到预期效果 mode = "widthFix" (按图片高度自适应) 或 mode="aspectFill&quo ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
小程序中所有组件学习
视图容器 view 视图容器属性名类型默认值说明最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时 ...

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

小程序中textarea自适应高度的问题相关推荐

最新文章

热门文章