当前位置: 首页 > Web前端 > vue.js

使用flex解决input定位问题

时间:2023-03-31 22:32:36 vue.js

使用简单布局解决fixed下输入框使用问题布局会出现不兼容的情况。布局是列表底部是input,根据浏览器定位放在底部。输入框被点击时,输入位置会乱序。这里,出现了向上移动的情况。在这里,有一个失踪。在这种情况下,您必须滑到底部才能出现。经过一系列面向百度的编程,各种监控输入重点写相应的事件,然后为输入定义一些位置。我觉得很麻烦很麻烦。最后自己实践了一个比较完善的方案,只用flex布局就可以轻松实现。首先,将页面分成两块,形成列表滚动区和输入区。首先,将最外面的盒子设置为弹性盒子并垂直排列。高度设置为100%,与窗口大小相同。可以使用绝对定位获取高度,也可以为body设置100%高度继承等。box{display:flex;弹性方向:列;height:100%}像这样垂直排列,自动打开滚动区域的框。名单{弹性:1;宽度:100%;溢出-y:滚动;-webkit-overflow-scrolling:touch;}设置底部高度.foot{width:100%;高度:100rpx;background:#fff;}这样就完成了app框架已经适配公众号、小程序、app(还未发布)。在管理后台使用vue+iview框架开源并不容易。希望大家关注,说不定会有意想不到的收获呢!地址:http://github.crmeb.net/u/qiang