微信小程序,几行代码实现图片瀑布流

aiotto资源分享

于 2020-07-23 14:23:40 发布

阅读量1.2k

点赞数 1

分类专栏： JAVA

本文链接：https://blog.youkuaiyun.com/qq_36183235/article/details/107535804

版权

JAVA 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个小程序中用于展示图片的页面实现方式，使用了wxml、wxss和js代码进行布局和功能的实现，展示了如何在小程序中加载并显示图片集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iPhone X效果:

iPhone X

iPad Pro 效果:

iPad Pro

js 代码:

Page({
  data: {
    list:[]
  },
  onLoad: function (options) {
          this.setData({
            list: [
            {"url":"../../image/Yoko1.jpg"}
            ,{"url":"../../image/Yoko1.jpg"},
            {"url":"../../image/無題.jpg"},
            {"url":"../../image/水族館1.jpg"},
            {"url":"../../image/texas.jpg"}
            ,]
          })
  }
})

wxml:

<view class='container'>
    <image src='{{item.url}}'  wx:for="{{list}}" mode='widthFix' wx:key="{{index}}"></image>
</view>

css

.container{
  column-count: 2;
  column-gap:2rpx;
  padding-left: 8rpx;
}
image{
  width: 360rpx;
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);
  overflow-y: scroll;
  border-radius: 30px 30px 30px 30px;
  -moz-border-radius: 25px;
  -webkit-overflow-scrolling: touch;
}