微信小程序 简单实现图片瀑布流

微信小程序 简单实现图片瀑布流

简单实现图片瀑布流

<view class="container">
  <view class="box" wx:for='{{show}}' wx:key='key'>
    <image class="image" mode="widthFix" src="{{item.image}}"></image>
    <view class="info">
      <view>{{item.name}}</view>
    </view>
  </view>
</view>
.container {
  width: 740rpx;
  column-count: 2;
  column-gap: 10rpx;
}

.box {
  width: 350rpx;
  font-size: 10px;
  margin: 20rpx;
  background-color: #FFF;
  border-radius: 20rpx;
  display: inline-block;
}

.image {
  width: 350rpx;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
}

.info {
  padding: 10rpx;
}

Page({ 
  data: {
    show:[
        {
            image: "图片0地址",
            name: "图片0文字描述"
        },
        {
            image: "图片1地址",
            name: "图片1文字描述"
        },
        {
            image: "图片2地址",
            name: "图片2文字描述"
        },
        {
            image: "图片3地址",
            name: "图片3文字描述"
        },
        {
            image: "图片4地址",
            name: "图片4文字描述"
        },
        {
            image: "图片5地址",
            name: "图片5文字描述"
        }
    ]
  }
})

版权声明:本文为 溪月阁 | MoBrook 博主「 皓月 」的原创文章遵循用 CC BY-NC-SA 4.0 版权协议进行许可,转载请附上原文出处链接及本声明。

本文链接https://mobrook.cn/index.php/kanni-86/

上一篇:

没有了,已经是最新文章