当前位置:   article > 正文

uniapp文本框上下滚动问题

uniapp文本框上下滚动问题

一个基本需求,textarea标签没有办法通过手拖动的方式进行滚动,当文字超出其容量后,想要编辑上面被遮挡部分的文字这边难以点到,电脑可以鼠标滚轮,但手机需要拖动但无效:

下面提供了我的解决思路:

1.首先先设置autoHeight是得textarea自适应高度:

<textarea class="text_field" autoHeight placeholder="请输入文字~" v-model="XXX" maxlength="300"></textarea>

2.对其设置最小高度以撑起容器

  1. .text_field {
  2. min-height: 300rpx;
  3. width: 100%;
  4. }

3.想要滚动,用可滚动标签包裹

  1. <scroll-view style="white-space: nowrap;" class="text_field_outer" scroll-y>
  2. <textarea class="text_field" placeholder="请输入文字~" v-model="XXX" maxlength="300" autoHeight></textarea>
  3. </scroll-view>

4.scroll-view参考

  1. .text_field_outer {
  2. margin-top: 20rpx;
  3. border: 1px solid lightgray;
  4. background-color: #fff;
  5. box-sizing: border-box;
  6. display: inline-block;
  7. height: 400rpx;
  8. padding: 1vh 1vw;
  9. position: relative;
  10. }

5.(不必要)可添加字数统计

  1. // 同级添加,外部别忘包裹relative容器
  2. <span class="text_number">{{XXX.length}}/300</span>

底部留白:

  1. .text_field_outer {
  2. padding-bottom: 55rpx;
  3. }

之后即可生效(不会做gif,脑补下吧。。。TAT):

希望本文会对您有所帮助~ ^_^

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/652044
推荐阅读
相关标签
  

闽ICP备14008679号