实现一个简单的瀑布流列表

实现一个两列的瀑布流布局,支持无限滚动
**思路:**利用flex布局,将列表分为左右两侧,因为这种方式存在一个弊端,就是当有一侧的高度越来越高的时候,滑到底部的时候就会出现一个很明显的高度差,为了修复这个漏洞,写一个算法,计算每一页两侧列表的高度差,举个例子,当左侧高度比右侧高很多的时候,则把下一页列表的第一个数据放在右侧,补齐高度,反之同理;如果数据是无限滚动加载不会滑动到底部的话,则可以不做处理;

代码如下:

<template><div class="prod-list"><van-list v-model:loading="loading" :finished="finish" finished=text="没有更多了" @load="load"><div class="left"><div id="left-box"<productCard v-for="productItem in productListLeft" :key="productItem.id" :itemInfo="productItem" :itemType="itemType"></productCard></div></div><div class="right"><div id="right-box"><productCard v-for="productItem in productListRight" :key="productItem.id" :itemInfo="productItem" :itemType="itemType"></productCard></div></div></van-list></div>
</template>
<script>
import  ref  from 'vue
import { getAllstores,getAllGoods, getAllsuggest,getAllIntroduction } from '@/api/modules/goods.js'
import productCard from './productcard.vue'export default {props: {itemType: String,activeClass: Number},components: {productCard,Annotate},setup(props) {const page = ref(0)const size = ref(8)const loading = ref(false)const finish = ref(false)const apiMap = { getAllsuggest, getAllGoods, getAllstores, getAllIntroduction }const productList = ref([])const productListLeft = ref([])const productListRight = ref([])const leftHeightNum = ref(0)const rightHeightNum = ref(0)const getContentHeight = () => {const leftBox = document.querySelector('#left-box')const rightBox = document.querySelector('#right-box')leftHeightNum.value = leftBox ? leftBox.offsetHeight : 0rightHeightNum.value = rightBox ? rightBox.offsetHeight : 0}const getorderList = (list, leftList, rightList, flag) = > {for(let i = 0; i < list.length; i++) {if (flag ===  left') {if (i % 2 ==0 ) {rightList.push(list[i])} else {leftList.push(list[i])} } else {if (i % 2 == 0) {leftList.push(list[i])else {rightList.push(list[i])}}}}const getProduct = (path = 'getAllSuggest', className = 0, index) =>loading.value = trueconst targetApi = apiMap[path]const params = {page: page .value.size: size.value,body: path !="getAllSuggest' || path != 'getAllIntroduction'? {goodsTypeID: className.} : null}targetApi(params).then(async res => {if (res.code === 20000) {if (page.value == 0) {productList.value = []productListLeft.value = []productListRight.value = []}let leftList = []let rightList = []productList.value = res.data.listfinish.value = page.value >= Number(res.data.totalPages)if (productList.value.length > 0) {await getContentHeight()if (page.value === 1) {getorderList(productList.value, leftList, rightList, 'right')} else {if (leftHeightNum.value > rightHeightNum.value && leftHeightNum.value - rightHeightNum.value > 100) {let firstItem = productList.value.shift()rightList.push(firstItem)getorderList(productList.value, leftList, rightList,'left')			  	} } else if ( leftHeightNum.value < rightHeightNum.value && rightHeightNum.value - leftHeightNum.value > 100) {let firstItem = productList.value.shift()leftList.push(firstItem)getorderList(productList.value, leftList, rightList,'right')} else {getorderList(productList.value, leftList,rightList,'right')}}productListLeft.value = [...productListLeft.value,...leftList]productListRight.value = [...productListRight.value, ...rightList]loading.value = false} else {loading.value=false;finish.value =true}}).catch(err => {loading.value=falsefinish.value =true})}const onLoad = () => {page.value += 1getProduct(props.itemType,props.activeClass)}// 重置数据const resetData = () => {page.value = 1productList.value = []productListLeft.value = []productListRight.value = []loading.value = falsefinish.value = false}return {productList,loadingfinish,onLoad,page,getProduct,productListLeft,productListRight,resetData,}
</script>
<style lang="scss"scoped>
.prod-list {.container {width: 100%;display: flex;.left {flex: 1;margin-right: 8px;}.right {flex: 1;}}.van-list {:deep(.van-list finished-text) {width: 100%;}:deep(.van-list placeholder) {width: 100%;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/140830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

odoo16前端框架源码阅读——rpc_service.js

odoo16前端框架源码阅读——rpc_service.js 先介绍点背景知识&#xff0c;这样方便阅读代码。 一、 JSONRPC的规范 https://www.jsonrpc.org/specification 中文翻译版本&#xff1a;https://wiki.geekdream.com/Specification/json-rpc_2.0.html JSON-RPC是一个无状态且轻…

使用swagger-typescript-api

引言 前后端分离大致是这样的 后端&#xff1a;控制层 / 业务层 / 数据操作层前端&#xff1a;控制层 / 视图层 前后端的控制层&#xff0c;实际上就是前后端接口的对接 前后端分离&#xff0c;实现了更好地解耦合&#xff0c;但也引入了接口对接的过程&#xff0c;这个过程…

ChatGPT-3.5 插件推荐:语音输入,视频总结,联网检索

前言 GPT4 里是有内置的插件市场的&#xff0c;不过博主一直觉得自己对这个工具的使用还不够到位&#xff0c;现在购买升级版性价比不划算所以暂时还没有开。不过今天在学习使用的时候&#xff0c;发现 GPT3.5 也是可以通过网页插件方式进行升级扩展的&#xff0c;而且功能还比…

ChatGPT+Roblox,元宇宙的AI叙事逻辑#Leveling Up

MixCopilot 嗨&#xff0c;亲爱的听众朋友们&#xff01;欢迎收听我们的播客节目&#xff01;我是你们的主播&#xff1a;MixCopilot 混合副驾。今天我们要为大家带来的是我们的AI革命系列节目之一。这个系列节目聚焦于AI领域的一些最有影响力的建设者&#xff0c;他们将会讨论…

web网站 固定的邀请码字符 能被爬虫爬取吗?动态改变邀请码的字符是不是可以避免爬虫爬取或数据泄露

无论邀请码字符是固定的还是动态改变的&#xff0c;都无法完全避免爬虫爬取或数据泄露的风险。以下是一些要考虑的因素&#xff1a; 爬虫技术的发展&#xff1a;爬虫技术不断发展&#xff0c;可以智能地解析和获取网页内容。即使邀请码字符是固定的&#xff0c;高级爬虫仍然可以…

Linux - 驱动开发 - watchdog - SMP机制下多核确活

说明 理论上&#xff1a;不管IC是单核还是多核&#xff0c;只要watchdog有被循环feed&#xff0c;就不会触发超时重启&#xff0c;因此watchdog在SMP机制下的多核环境显得比较宽松&#xff0c;只要任意核存活&#xff08;喂狗&#xff09;就不会重启设备。 实际情况 有客户反…

直播间自动发言机器人的运行分享,与开发需要到的技术分析

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 随着人工智能技术的不断发展&#xff0c;自动发言机器人已经成为了当今社交媒体领域的重要组成部分。它们能够自动化地发布内容、回复用户评论和消息&#xff0c;大大提高…

【数据结构】栈和队列的模拟实现(两个方式实现)

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

Qt绘制简单图表

Qt图表类似于model/view&#xff0c;chart就是model。 创建图表的各个部件&#xff1a; QChart *chart new QChart();chart->setTitle(tr("简单函数曲线")); // chart->setAcceptHoverEvents(true);ui->chartView->setChart(chart);ui->chartVi…

网络安全自学

前言 一、什么是网络安全 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防…

springboot---pom.xml

<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 https://…

纯c语言模拟栈和队列(初学必看)

一、栈(Stack) 1.栈的概念及其结构 栈是一种特殊的线性表&#xff0c;在栈这个结构里&#xff0c;越先存进去的数据越难取出来。 这个结构就像是一个只有一端有打开的容器&#xff0c;越先放进去的球越在底部&#xff0c;想要把底部的球拿出来&#xff0c;就必须先把前面的求…

C#8.0本质论第十二章--泛型

C#8.0本质论第十二章–泛型 C#通过泛型来促进代码重用&#xff0c;在词义上等价于C模板。 在泛型编程中&#xff0c;数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时&#xff0c;“运行时”将自动对它进行装箱&#xff0c;获取值类型的实例时则需要…

树莓派4B的测试记录(CPU、FFMPEG)

本文是用来记录树莓派 4B 的一些测试记录。 温度 下面记录中的风扇和大风扇是这样的&#xff1a; 为什么要用大风扇呢&#xff1f;因为小风扇在外壳上&#xff0c;气流通过外壳的珊格会有啸叫&#xff0c;声音不大但是很烦人&#xff0c;大风扇没这个问题&#xff0c;并且同样…

Vue3 数据响应式原理:Proxy和Reflect

我们在Vue2中使用的是Object.defineProperty方法来实现数据响应式的&#xff0c;可以通过get和set方法来监听对象的访问和修改。 但是并不能响应对象中属性的增加和删除&#xff0c;只能使用Vue.$set 和Vue.$delete 来对对象中的属性进行增加和删除。 数组也不能直接通过下标…

PyCharm因安装了illuminated Cloud插件导致加载项目失败

打开Pycharm时会有弹窗提示&#xff1a; The license for Illuminated Cloud is invalid or has expired. All Illuminated Cloud features will be disabled. 这个弹窗会导致你加载项目一直失败&#xff0c;close project 也关不掉&#xff0c;我都是用任务管理器杀死进程的…

Jmeter 性能 —— 负载阶梯场景!

1、安装阶梯测试的第三方插件->搜jpgc 选项-JMeter Plugins Manager -搜jpgc 空格&#xff0c;然后安装 2、脚本-线程组选jpgc Stepping Thread Group 最终并发数为100&#xff0c;并发数从0开始&#xff0c;5秒内增加10个并发数&#xff0c;增加10个后持续30s&#xff0c;…

学习c#的第十天

目录 C# 字符串&#xff08;String&#xff09; 创建 String 对象 String 类的属性 String 类的方法 实例 C#的string.Format格式化日期 C# 字符串&#xff08;String&#xff09; 创建 String 对象 可以使用以下方法之一来创建 string 对象&#xff1a; 1、通过给 St…

taro(踩坑) npm run dev:weapp 微信小程序开发者工具预览报错

控制台报错信息&#xff1a; VM72:9 app.js错误: Error: module vendors-node_modules_taro_weapp_prebundle_chunk-JUEIR267_js.js is not defined, require args is ./vendors-node_modules_taro_weapp_prebundle_chunk-JUEIR267_js.js 环境&#xff1a; node 版本&#x…

Spring Boot(二)

1、运行维护 1.1、打包程序 SpringBoot程序是基于Maven创建的&#xff0c;在Maven中提供有打包的指令&#xff0c;叫做package。本操作可以在Idea环境下执行。 mvn package 打包后会产生一个与工程名类似的jar文件&#xff0c;其名称是由模块名版本号.jar组成的。 1.2、程序…