评论

textarea组件在scroll-view组件中的使用心得

textarea组件自适应高度配置在scroll-view组件中的使用顶起键盘自适应变高多行后被遮住了,只有监听换行事件改变scrollTop才行,这里还需要cursor-spacing="100"

页面

<textarea value=’{{textAreaText}}’
bindinput=“getTextAreaTextWords”
maxlength="{{textAreaMaxLen}}"
auto-height
bindlinechange=“bindlinechange”
bindfocus=“bindfocus”
bindblur=“bindblur”
cursor-spacing=“100”>
</textarea>

data

textAreaMaxLen: 400, // 最大字符数
textAreaCurrentLen: 0, // 当前文本长度
textAreaText: “”, // 文本内容
focus:false,//是否聚焦

js

//签收表单富文本
getTextAreaTextWords: function (e) {
let that = this;
// 设置最大字符串长度(为-1时,则不限制)
let textAreaMaxLen = that.data.textAreaMaxLen;
// 文本长度
let textAreaCurrentLen = e.detail.value.length;
that.setData({
textAreaMaxLen: textAreaMaxLen,
textAreaCurrentLen: textAreaCurrentLen,
textAreaText: e.detail.value
});
},
//输入框行数变化时调用
bindlinechange: function(e) {
const that = this;
const scrollTop = Math.round(e.target.offsetTop + e.detail.height);
if (that.data.focus) {
that.setData({
scrollTop: scrollTop
})
}
},
//输入框聚焦时触发
bindfocus: function (e) {
const that = this;
that.setData({
focus:true
});
},
//输入框失去焦点时触发
bindblur: function (e) {
const that = this;
that.setData({
focus: false
});
}

css

其实cursor-spacing="100"和你这里设置的高度有关,自己调整,因为我想把底部的字数也显示出来
textarea {
display: block;
margin: 8rpx 8rpx 0 8rpx;
width: 650rpx;
min-height: 175rpx;
background-color: white;
}

最后一次编辑于  2019-07-24  
点赞 1
收藏
评论

1 个评论

  • 不要叫我唱歌
    不要叫我唱歌
    2019-07-24

    我这操作可能很奇怪。如果你碰到了可以使看看能不能优化一下,改了半天了,6plus测试ok,虽然换行时刷新scroll距离顶部高度会抖动,渲染耗时操作抖动很正常,

    2019-07-24
    赞同
    回复
登录 后发表内容