uniapp实现瀑布流

简介: uniapp实现瀑布流

首先template

<!-- 商品内容 -->
      <view class="content">
        <view class="list" v-for="(item, index) in itemList" :key="item.id" @click="intro(item)">
          <image mode="widthFix" :src="item.img"></image>
          <view class="title">{{ item.title }}</view>
          <view class="con">{{ item.synopsis }}</view>
          <view class="con_one">
            <view class="con_one_one">¥{{ item.price }}</view>
            <view class="con_one_two">
              <s>¥{{ item.original_price }}</s>
            </view>
          </view>
        </view>
      </view>

在修改样式

.list {
    break-inside: avoid;
    width: 330rpx;
    border: 1px solid #f4f4f4;
    margin-top: 10px;
    border-radius: 20rpx;
  }
  .con {
    color: #8b8d8c;
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*禁止换行*/
    text-overflow: ellipsis;
    margin-left: 15rpx;
    margin-right: 15rpx;
    font-size: 26rpx;
  }
  .title {
    margin-left: 15rpx;
    margin-right: 15rpx;
    font-size: 26rpx;
    color: #8b8d8c;
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*禁止换行*/
    text-overflow: ellipsis;
  }
  /* 内容区 */
  .content {
    padding: 30rpx;
    box-sizing: border-box;
    column-count: 2;
  }
  image {
    width: 100%;
    border-radius: 6rpx;
  }

js中

itemList: [
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题1',
          content: '我是内容1',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
          title: '我是标题2',
          content: '我是内容2',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
          title: '我是标题3',
          content: '我是内容3',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
          title: '我是标题4',
          content: '我是内容4',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题5',
          content: '我是内容5',
        },
      ],

改一下数据即可使用

相关文章
|
7月前
uniapp实现瀑布流?
uniapp实现瀑布流?
|
前端开发 JavaScript UED
uniapp实现瀑布流
uniapp实现瀑布流
512 0
|
存储 前端开发 容器
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
uniapp瀑布流:他的数据是纵向渲染,怎么实现动态上拉加载数据?
155 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
135 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
70 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
89 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
123 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
124 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

相关课程

更多