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

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，看情况可以也使用其它方式

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

A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序用vant组件制作通讯录
微信小程序用vant组件制作通讯录效果图: 代码如下: .wxml: 在这里插入<van-index-bar index-list="{{ indexList }}"> ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序 F2 图表组件
@antv/f2-canvas 微信小程序 F2 图表组件安装 npm i @antv/f2-canvas 快速开始下面我们就开始使用 f2-canvas 组件来绘制图表吧,这里假设用户已经初步了 ...

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

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

最新文章

热门文章