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;}/style4.完整源码传送门:https://github.com/tianyalu/mpvue-ui-demo
ui小程序布局-微信小程序之一个小需求的UI布局方式-小程序ui
浏览量:1600
时间:
来源:天-涯-路
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!