阿毛Alex - 2023年10月29日
type: channel
link: https://alexmao.com/index.php/2023/10/29/
description: 生命不息，折腾不止
items: Vue里做瀑布流的一个解决方案
items: beforeRouteLeave无法获得this

Vue里做瀑布流的一个解决方案
type: item
date: 2023-10-29T14:31:00+00:00
description: 应用里需要做一个瀑布流的页面，类似于小红书的首页，今天终于比较完美地把这个页面做完，记录总结一下思路，分享给大家。第一部分：CSS将页面分成左右两列，左边循环一个数组，右边循环一个数组。在data里，给左右两列的div设置一个初始高度为0。从后端获取数据的时候，对后端数组进行循环处理，根据左右两列的div高度，决定把当前对象分给左边还是右边的数组。每次分配的时候，根据元素的高低，把左/右边div的高度新增上去，以便下一个对象分配的时候使用。元素的高需要大家根据自身情况判断，比如图片高度、标题的高度等等，自己判断一下有几种情况。比如我的元素里，图片的高度是比较固定的，影响高度的主要是标题的行数，就根据标题的字数进行判断每个元素的整体高度。// 获取当前页的清单数据，pageNum默认为1，hasMore默认为true async getLists(pageNum) { if (this.hasMore) { // 如果hasMore是true,就可以继续去获取数据 const moreLists = await ListService.getLists(pageNum) this.moreLists = moreLists // 如果获取到的lists为空,说明没有更多数据了,将hasMore改成false,页面提示"没有更多数据"了 if (moreLists.length === 0) { this.hasMore = false // 如果已经没有更多数据了,就取消监听窗口变化,因为全部数据都展示出来了不需要再监听 window.removeEventListener('scroll', this.monitorScrollToEnd) return } // 将获取的数据添加到lists中 for (let list of moreLists) { this.lists.push(list) } // 将获取到的数据分列 this.spiltList() } }, // 将获取到的数据，分为左右两列 spiltList() { // 定义变量，接受list数据源 let data = {} for (let i = 0; i < this.moreLists.length; i++) { // 每次只处理新增的lists data = this.moreLists[i] if (this.heightOfLeft <= this.heightOfRight) { // 如果左边矮，就放到左边 this.listLeft.push(data) // console.log('左边有' + this.listLeft) // 根据自己的元素逻辑更新容器的高度 if (data.listTitle.length <= 10) { this.heightOfLeft = this.heightOfLeft + 249.67 } else { this.heightOfLeft = this.heightOfLeft + 271.67 } // console.log( // '左边高变成' + this.heightOfLeft + '右边高是' + this.heightOfRight // ) } else { // 如果右边矮，就放到右边 this.listRight.push(data) // console.log('右边有' + this.listRight) // 根据自己的元素逻辑更新容器的高度 if (data.listTitle.length <= 10) { this.heightOfRight = this.heightOfRight + 249.67 } else { this.heightOfRight = this.heightOfRight + 271.67 } // console.log( // '右边高变成' + this.heightOfRight + '左边高是' + this.heightOfLeft // ) } } // 数据处理完后，重新启动监听 window.addEventListener('scroll', this.monitorScrollToEnd) }, 第二部分：页面加载完后，开始监听窗口高度，如果已经滚动到最下面，就向后台请求下一页的数据。这里注意触发请求时，要暂时关闭监听，否则就会出现一连串请求的情况，一下子给请求个七八次。等到新的数据加载完后，再重新启动监听即可。做完这一部分就可以实现瀑布流无限加载到最后。mounted() { // 监听窗口变化 window.addEventListener('scroll', this.monitorScrollToE…

beforeRouteLeave无法获得this
type: item
date: 2023-10-29T12:28:31+00:00
description: 碰到一个奇葩的事情，使用箭头函数的时候，无法获得this，不使用才能获取，真是无语。// 这样不行 beforeRouteLeave: (to, from, next) => {} // 这样可以 beforeRouteLeave: function (to, from, next) {} 这不是搞笑么。