小程序的图片,一定要固定大小才能显示出来。那为什么携程的列表可以显示不同尺寸的大小呢?
发布于 5 年前 作者 rzhu 728 次浏览 来自 分享

最近在思考,写点什么呢?!想了很久,决定了 还是仿!!!这次我打算用原生的方式仿携程的酒店列表(未完)。

却无意中发现,携程的列表居然有不同大小的图片~~~~~~~~~~~~~~

虽然,我不知道他的实现方式,是如何的。

但是我找到了解决的办法。也证实了我的想法。

那就是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,或者扫以下码《实际项目之酒店列表》(刚推,正在审核。效果应该隔天才能看到)

3 回复

不错不错!值得表扬!

以后就不会走坑了

回到顶部