微信小程序之一个小需求的UI布局方式

    有这么一个UI布局需求：上半部分是一个可变列表，下方底端有一个输入框布局，要求在列表长度较短时，输入框布局保留在底端；当列表长度够长时，输入框布局放在列表底端，可以随列表一起滚动。效果如下图所示：

    实现分析：如下图所示，A布局需要设定一个固定高度，如100vh, 超出部分可以滚动；B布局设定一个最小高度，如86%；C布局放在B布局下方即可。

    关键代码：

<template>
  <div class="container">
    <div class="content">
      <div class="variable">
        <div class="btn-container"> 
          <button class="btn" @click="addItem">add item</button>
          <button class="btn" @click="reduceItem">reduce item</button>
        </div>
        <ul>
          <li v-for="item in items" :key="item.id">
            <div class="item">{{item.name}}</div>
          </li>
        </ul>
      </div>
      <div class="item-input">
        <input placeholder="填写备注，限制20个字符" maxlength="20" class="comment" v-model.lazy="comment" @change="getComment"/>
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '测试item' },
        { name: '测试item' },
        { name: '测试item' },
        { name: '测试item' },
        { name: '测试item' }
      ]
    }
  },
  methods: {
    addItem() {
      this.items.push({ name: '添加的测试item' })
    },
    reduceItem() {
      this.items.splice(this.items.length - 1, 1)
      console.log('length: ', this.items.length)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100vh;
  overflow: scroll;
}
.variable {
  width: 100%;
  min-height: 86%;
  flex-direction: column;
}
.comment {
  width: 88%;
  font-size: 9pt;
  padding: 10rpx 20rpx;
  border: 1px solid #e0e0e0;
  border-radius: 4pt;
  margin-top: 16rpx;
  margin-bottom: 10rpx;
}
</style>

完整源码传送门：https://github.com/tianyalu/mpvue-ui-demo