一个基本需求,textarea标签没有办法通过手拖动的方式进行滚动,当文字超出其容量后,想要编辑上面被遮挡部分的文字这边难以点到,电脑可以鼠标滚轮,但手机需要拖动但无效:
下面提供了我的解决思路:
1.首先先设置autoHeight是得textarea自适应高度:
<textarea class="text_field" autoHeight placeholder="请输入文字~" v-model="XXX" maxlength="300"></textarea>
2.对其设置最小高度以撑起容器
.text_field {min-height: 300rpx;width: 100%;
}
3.想要滚动,用可滚动标签包裹
<scroll-view style="white-space: nowrap;" class="text_field_outer" scroll-y><textarea class="text_field" placeholder="请输入文字~" v-model="XXX" maxlength="300" autoHeight></textarea>
</scroll-view>
4.scroll-view参考
.text_field_outer {margin-top: 20rpx;border: 1px solid lightgray;background-color: #fff;box-sizing: border-box;display: inline-block;height: 400rpx;padding: 1vh 1vw;position: relative;
}
5.(不必要)可添加字数统计
// 同级添加,外部别忘包裹relative容器
<span class="text_number">{{XXX.length}}/300</span>
底部留白:
.text_field_outer {padding-bottom: 55rpx;
}
之后即可生效(不会做gif,脑补下吧。。。TAT):
希望本文会对您有所帮助~ ^_^