微信小程序实战，基于vue2实现瀑布流

1、什么是瀑布流呢？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。

下面这些就是用瀑布流来实现，看起来是不是很美观呢？

2、实现一个简单的瀑布流

先看一下咱们最终的试下效果吧，只是简单传入文字进行演示

1、瀑布流的特点

1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。

2、唯美：图片的风格以唯美的图片为主。

3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前

2、核心算法

通过图片我们可以直观的看到，每一个卡片的高度都是不一样的，需要我们实时能计算高度，同时左右的高度还是不能相互影响。

这里我们主要通过两个数组进行实现，即分为左右数组，核心代码如下：

<view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot>
</view>
<view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot>
</view>data() {return {leftList: [],rightList: [],tempList: [],scrollTop: 0,}
}

对传入数组进行分组和计算高度

async splitData() {if (!this.tempList.length) return;let leftRect = await this.$uGetRect('#u-left-column');let rightRect = await this.$uGetRect('#u-right-column');// 如果左边小于或等于右边，就添加到左边，否则添加到右边let item = this.tempList[0];// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰// 数组可能变成[]，导致此item值可能为undefinedif (!item) return;if (leftRect.height < rightRect.height) {this.leftList.push(item);} else if (leftRect.height > rightRect.height) {this.rightList.push(item);} else {// 这里是为了保证第一和第二张添加时，左右都能有内容// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边if (this.leftList.length <= this.rightList.length) {this.leftList.push(item);} else {this.rightList.push(item);}}// 移除临时列表的第一项this.tempList.splice(0, 1);// 如果临时数组还有数据，继续循环if (this.tempList.length) {this.splitData();return}
}

3、完整的组件代码如下

<template><scroll-view class="scroll-y" scroll-y="true" @scrolltolower="tolower" :scroll-top="scrollTop"><view class="u-waterfall" id="list"><view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view><view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view></view></scroll-view>
</template><script>export default {name: "waterfall",props: {value: {// 瀑布流数据type: Array,required: true,default: function() {return [];}},scrolltolower: {type: Function,default: () => {}}},data() {return {leftList: [],rightList: [],tempList: [],scrollTop: 0,}},watch: {copyFlowList(nVal, oVal) {this.tempList = this.cloneData(this.copyFlowList);this.splitData();}},mounted() {this.tempList = this.cloneData(this.copyFlowList);this.splitData();// this.$on('clearWaterFall', this.clear)},computed: {// 破坏flowList变量的引用，否则watch的结果新旧值是一样的copyFlowList() {return this.cloneData(this.value);}},methods: {async splitData() {if (!this.tempList.length) return;let leftRect = await this.$uGetRect('#u-left-column');let rightRect = await this.$uGetRect('#u-right-column');// 如果左边小于或等于右边，就添加到左边，否则添加到右边let item = this.tempList[0];// 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰// 数组可能变成[]，导致此item值可能为undefinedif (!item) return;if (leftRect.height < rightRect.height) {this.leftList.push(item);} else if (leftRect.height > rightRect.height) {this.rightList.push(item);} else {// 这里是为了保证第一和第二张添加时，左右都能有内容// 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边if (this.leftList.length <= this.rightList.length) {this.leftList.push(item);} else {this.rightList.push(item);}}// 移除临时列表的第一项this.tempList.splice(0, 1);// 如果临时数组还有数据，继续循环if (this.tempList.length) {this.splitData();return}},// 复制而不是引用对象和数组cloneData(data) {return JSON.parse(JSON.stringify(data));},tolower(e) {this.scrolltolower()},clear() {this.leftList = []this.rightList = []}}}
</script><style lang="scss" scoped>@mixin vue-flex($direction: row) {/* #ifndef APP-NVUE */display: flex;flex-direction: $direction;/* #endif */}.scroll-y {height: 78vh;margin-top: 18px;}.u-waterfall {@include vue-flex;flex-direction: row;align-items: flex-start;}.u-column {@include vue-flex;flex: 1;flex-direction: column;height: auto;width: 45vw;word-break: break-all;}
</style>

3、简单使用

基于vue的语法进行使用，先进行导入和注册

<script>
import waterfall from '../../component/waterfall/index.vue'
export default {name: 'content',components: {waterfall}
}
</script>

因为组件是基于插槽的形式进行开发的，所以我们可以直接传入咱们的样式和标签

<template><view class="main"><waterfall :value="dataList" :scrolltolower="getRecommendLove" ref="child"><template v-slot:left="left"><view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)"><view class="item">{{item.content}}</view></view></template><template v-slot:right="right"><view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)"><view class="item">{{item.content}}</view></view></template></waterfall></view>
</template>

最终的效果就可以达到我们的目标了

微信小程序实战，基于vue2实现瀑布流相关推荐

微信小程序实战--基于微信小程序的新闻客户端
wechat-newsapp 简介:这是一个新闻客户端的小程序版本,当然不能跟网易.腾讯之类的新闻客户端相比,这只是一个比较简易的版本. 注:11月3日微信已经开始了小程序的公测,所以下面的IDE破解 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
基于云开发的微信小程序实战教程（一）
基于云开发的微信小程序实战教程(一) 最近刚开发了款小程序,在开发过程中发现,基于云开发的教程资源不是很多,而且很不详细.所以边实战边总结了下云开发的简单教程,希望对你有所帮助. 本章主要内容:什么是 ...
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享...
?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程 ...
微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习课程介绍介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
微信小程序实战篇：实现抖音评论效果
IT实战联盟博客:http://blog.100boot.cn 我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的.本文教大家做一个抖音评论效果的小程序首先看下 ...
微信小程序实战-仿盒马鲜生
盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分项目功能 * 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面小程序设计过程 ...
axure 小程序网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程课程简介我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...

微信小程序实战，基于vue2实现瀑布流

1、什么是瀑布流呢？

2、实现一个简单的瀑布流

1、瀑布流的特点

2、核心算法

3、完整的组件代码如下

3、简单使用

微信小程序实战，基于vue2实现瀑布流相关推荐

最新文章

热门文章