微信小程序scroll-view组件套textarea框内文字和placeholder上飘解决

最新推荐文章于 2024-08-06 14:26:07 发布

Twilight丶z

最新推荐文章于 2024-08-06 14:26:07 发布

阅读量1.2k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_38962010/article/details/108118000

版权

微信小程序专栏收录该内容

2 篇文章

订阅专栏

wxml如下，此时scroll-view组件内的textarea中输入的文字和placeholder的内容在滚动屏幕时会上飘

<scroll-view style="width:100vw;height:100vh" bindscroll="onScroll" scroll-y="{{true}}" class="scroll">
    <view style="height:50vh"></view>
    <textarea placeholder="请输入内容" bindinput="msgInput" maxlength="100"></textarea>
    <view style="height:80vh"></view>
</scroll-view>

在scroll-view组件的css中加入display:inline-block;解决

<view class="scrollOut">
<scroll-view style="display:inline-block;width:100vw;height:100vh" bindscroll="onScroll" scroll-y="{{true}}" class="scroll">
    <view style="height:50vh"></view>
    <textarea placeholder="请输入内容" bindinput="msgInput" maxlength="100"></textarea>
    <view style="height:80vh"></view>
</scroll-view>
</view>

inline-block会产生白边空隙，套一层view，css设定overflow，看情况可以也使用其它方式