美文网首页WEB前端程序开发让前端飞uni-app
前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件wate

前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件wate

作者: 前端组件分享 | 来源:发表于2023-06-14 08:29 被阅读0次

前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall, 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046

效果图如下:

#### 使用方法

```使用方法

<!--  proList: 条目数组数据  goProDetail:条目点击事件跳转(实现了点击条目数据传值)-->

<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>

```

#### HTML代码部分

```html

<template>

<view class="content">

<!--  proList: 条目数组数据  goProDetail:条目点击事件跳转(实现了点击条目数据传值)-->

<ccWaterListView :proList="projectList" @click="goProDetail"></ccWaterListView>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import ccWaterListView from '../../components/ccList/ccWaterListView.vue';

export default {

components: {

ccWaterListView,

},

data() {

return {

// 列表数组

projectList: []

}

},

mounted() {

this.requestData();

},

methods: {

// 列表条目点击事件

goProDetail(item) {

console.log("条目数据 = " + JSON.stringify(item));

uni.showModal({

title:'选择条目',

content:'选择条目数据 = ' + JSON.stringify(item)

})

},

requestData() {

// 模拟请求参数设置

let reqData = {

'area': '',

"pageSize": 10,

"pageNo": this.curPageNum

}

// 模拟请求接口

this.totalNum = 39;

this.projectList = [];

let imgArr = ['https://images.pexels.com/photos/7214784/pexels-photo-7214784.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',

'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',

'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800']

let nameArr = ['冰糖心苹果 红富士大果出售 应季水果 繁荣种植园','农鲜洛川红富士苹果16枚,单果160g,新鲜饱满水分充足','甜醉了 烟台苹果栖霞红富士新鲜水...','惠寻 山东烟台红富士苹果12枚 果径...']

for (let i = 0; i < 20; i++) {

this.projectList.push({

'proImg': imgArr[i%6],

'proName': nameArr[i%4],

'proDetail': '我是产品详情' + i,

'proPrice': 60 + 6 * i + '元',

'status': (i % 3 == 0)?'618':'',

'id': i + ''

});

}

}

}

}

</script>

```

#### CSS

```CSS

<style>

page {

background-color: #f7f7f7;

}

.content {

display: flex;

flex-direction: column;

}

</style>

```

相关文章

  • Flutter 小部件 流式布局、自动换行(Wrap、Flow)

    文章目录 流式布局WrapFlow 流式布局 流式布局在移动端是非常常见的,比如商品列表,瀑布流、标签页等等。使用...

  • Flutter 之 流式布局(Wrap、Flow)

    流式布局 流式布局在移动端是非常常见的,比如商品列表,瀑布流、标签页等等Flutter 中提供了两种流式布局Wra...

  • 瀑布流的三种实现

    先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流? 瀑布流,又称瀑布流式布局。 这种...

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

  • 原生js实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流,又称瀑布流式布局。是比较流行的一种网...

  • 瀑布流

    1、什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚...

  • 浅谈vue中的瀑布流-懒加载用法

    1. 前言 瀑布流是非常流行的一种布局方式,所以今天来玩下 2. 是什么 what 瀑布流,又称瀑布流式布局[ht...

  • 瀑布流组件初探-Vue.js

    waterfall-瀑布流组件 基于Vue.js的瀑布流组件 GitHub地址: https://github.c...

  • iOS 瀑布流

    1.简单认识 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条...

  • 花瓣网瀑布流(滚动加载)采集思路详解

    瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局。视觉表现为,随着页面滚动条向下滚动,这种布局还会不断加载数...

网友评论

    本文标题:前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件wate

    本文链接:https://www.haomeiwen.com/subject/cilhydtx.html