有这么一个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
微信小程序
