微信小程式之一個小需求的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  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