E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序之一个小需求的UI布局方式
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏