webview 微信网页 ios andriod 列表滑动 io

布局：flex

对于公众号网页开发，ios和 android的兼容一直都是很让开发头痛

功能

• 列表滚动（ios/andriod都可以）

• input调起软键盘，随视图高度压缩，input所在盒子上移（ios/andriod都可以）

<template>
  <div class="container">
    <ul>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
      <li>动态渲染列表</li>
    </ul>
    <div class="operation-box">
      <div class="operation">
        <input>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
}
</script>


<style lang="scss" scoped>
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  ul{
    flex: 1;
    overflow: auto;
    li{
      height: 100px;
    }
  }
  .operation-box{
    height: 98px;
    .operation{
      position: fixed;
      bottom: 0;
      padding: 20px;
      background-color:aquamarine;
      width: 100%;
      height: 98px;
      input{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>