ui小程序布局-微信小程序之一个小需求的UI布局方式-小程序ui-即速应用

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

浏览量：1696 时间：2020-03-20 来源：天-涯-路

1.有这么一个UI布局需求：上半部分是一个可变列表，下方底端有一个输入框布局，要求在列表长度较短时，输入框布局保留在底端；当列表长度够长时，输入框布局放在列表底端，可以随列表一起滚动。效果如下图所示：
2.实现分析：如下图所示，A布局需要设定一个固定高度，如100vh,超出部分可以滚动；B布局设定一个最小高度，如86%；C布局放在B布局下方即可。
3.关键代码：
templatedivclass="container"divclass="content"divclass="variable"divclass="btn-container"buttonclass="btn"@click="addItem"additem/buttonbuttonclass="btn"@click="reduceItem"reduceitem/button/divulliv-for="iteminitems":key="item.id"divclass="item"{{item.name}}/div/li/ul/divdivclass="item-input"inputplaceholder="填写备注，限制20个字符"maxlength="20"class="comment"v-model.lazy="comment"@change="getComment"//div/div/div/templatescriptexportdefault{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)}}}/scriptstylelang="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:10rpx20rpx;border:1pxsolid#e0e0e0;border-radius:4pt;margin-top:16rpx;margin-bottom:10rpx;}/style
4.完整源码传送门：https://github.com/tianyalu/mpvue-ui-demo