评论

小程序的图片,一定要固定大小才能显示出来。那为什么携程的列表可以显示不同尺寸的大小呢?

如果显示不同尺寸大小的图片

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

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


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


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


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

最后一次编辑于  2020-02-28  
点赞 1
收藏
评论

6 个评论

  • 小叶子
    小叶子
    2020-09-19


    使用widthFix或者heightFix这两种图片模式,就可以实现宽度或者高度自适应

    2020-09-19
    赞同
    回复
  • 小叶子
    小叶子
    2020-09-19

    使用这两种图片模式,就可以实现宽度或者高度自适应

    2020-09-19
    赞同
    回复
  • 小叶子
    小叶子
    2020-09-19

    使用这两种图片模式,就可以实现宽度或者高度自适应

    2020-09-19
    赞同
    回复
  • 大鲨鱼
    大鲨鱼
    2020-03-02

    以后就不会走坑了

    2020-03-02
    赞同
    回复 1
    • 🌙
      🌙
      2020-03-02
      哈哈~
      2020-03-02
      回复
  • 大鲨鱼
    大鲨鱼
    2020-03-02

    不错不错!值得表扬!

    2020-03-02
    赞同
    回复
  • 马尚尚
    马尚尚
    2020-02-29
    先收藏
    2020-02-29
    赞同
    回复 1
    • 🌙
      🌙
      2020-02-29
      谢谢~
      2020-02-29
      回复
登录 后发表内容