用uniapp写瀑布流商品列表

1. 创建一个uniapp项目，并在pages文件夹中创建一个商品列表的页面（例如：GoodsList.vue）。

2. 在页面中使用uni-ui组件库中的 masonry 组件来实现瀑布流布局。使用方法如下：

   • 在页面中引入 masonry 组件：

     import { masonry } from '@dcloudio/uni-ui'
     

   • 在页面的模板中添加 masonry 标签，并设定列数和间距：

     <masonry :cols="2" :space="10">
       <div class="item" v-for="(item, index) in goodsList" :key="index">
         <img :src="item.imgUrl" alt="">
         <p class="name">{{ item.name }}</p>
         <p class="price">{{ item.price }}</p>
       </div>
     </masonry>
     

     其中，:cols="2"表示设置瀑布流为2列，:space="10"表示设置每个商品之间的间距为10px。v-for 循环遍历 goodsList 中的商品数据，使用 item 变量表示当前商品，:key="index" 表示指定每个商品在列表中的唯一标识。

   • 添加样式来美化商品列表：

     .item {
       background-color: #ffffff;
       border-radius: 5px;
       box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
       overflow: hidden;
     }
     
     .item img {
       width: 100%;
       height: 150px;
       object-fit: cover;
     }
     
     .name {
       font-size: 14px;
       line-height: 20px;
       color: #333333;
       margin-top: 10px;
       margin-bottom: 5px;
       max-height: 40px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     
     .price {
       font-size: 16px;
       line-height: 22px;
       color: #ff4242;
       margin-top: 5px;
     }
     

     设置商品展示区域(.item)的背景色、圆角、阴影以及溢出隐藏。设置商品图片大小、填充方式为覆盖。设置商品名称和价格的字体大小和颜色。

3. 在页面的JS文件中定义商品列表数据（goodsList），可根据需求从后端接口获取数据。如：

   data() {
     return {
       goodsList: [
         {
           id: 1,
           name: '商品一',
           price: '￥100.00',
           imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
         },
         {
           id: 2,
           name: '商品二',
           price: '￥200.00',
           imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
         },
         {
           id: 3,
           name: '商品三',
           price: '￥300.00',
           imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
         },
         ...
       ]
     }
   }
   

4. 运行 uniapp 项目，即可看到瀑布流商品列表的效果。