小程序的图片,一定要固定大小才能显示出来。那为什么携程的列表可以显示不同尺寸的大小呢?
最近在思考,写点什么呢?!想了很久,决定了 还是仿!!!这次我打算用原生的方式仿携程的酒店列表(未完)。
却无意中发现,携程的列表居然有不同大小的图片~~~~~~~~~~~~~~
虽然,我不知道他的实现方式,是如何的。
但是我找到了解决的办法。也证实了我的想法。
那就是css里的flex。可能根据内容的伸缩改变图片的高度,代码简单如下
.p-item
border-top: 6rpx solid #f5f5f5
background: #fff
ss-display-flex(row nowrap, flex-start)
overflow: hidden
.item-pic
flex: 1
image
width: 240rpx
height: 100%
.item-content
flex-grow: 1
padding: 25rpx 20rpx 15rpx 20rpx
实现效果:
真机效果可以搜索SAUI,或者扫以下码《实际项目之酒店列表》(刚推,正在审核。效果应该隔天才能看到)