赞
踩
一个基本需求,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):
希望本文会对您有所帮助~ ^_^
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。