瀑布流实现效果

实现思路

同样采用常见的两栏瀑布流布局，分别用数组goodsLeftList和goodsRightList储存左右两栏要渲染对象，初始化时，加载一张图片，然后依次把图片加到栏高更低的一栏中。主要使用的是image的@load事件。每次通过计算放入左右列表保存所有对象的数组将该对象删除图片加载完毕触发下个模块实现懒加载的效果

代码理解

<view class="waterfall_left"  ><view class="waterfall_list" v-for="(item,index) in goodsLeftList" :key="index" "><view class="waterfall_list_img"><image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image></view><view class="msg-box"><view class="name single-omit">{{item.goods_name}}</view><view class="price-box flex-align-center"><view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view></view></view></view>
</view>
<view class="waterfall_right"  ><view class="waterfall_list" v-for="(item,index) in goodsRightList" :key="index"><view class="waterfall_list_img"><image :src="item.goods_main_pic" mode="widthFix" @load="considerPush"></image></view><view class="msg-box"><view class="name single-omit">{{item.goods_name}}</view><view class="price-box flex-align-center"><view class="unit"><text>￥</text>{{item.goods_sku.sku_sale_price}}</view></view></view></view>
</view><script>
export default {props: {list: { type: Array, required: true },},data() {return {// 左侧商品列表goodsLeftList:[],// 右侧商品列表goodsRightList:[],// 组件数据备份newList:[],}},created() {this.touchOff();// 触发排列},mounted(){},watch: { list(newValue, oldValue) {this.touchOff()},},computed:{},methods: {// 触发重新排列touchOff(){this.newList = [...this.list];this.goodsLeftList = [];this.goodsRightList = [];if(this.newList.length != 0){this.goodsLeftList.push(this.newList.shift());//触发排列}},// 计算排列considerPush(){if(this.newList.length == 0)return;//没有数据了let leftH = 0,rightH = 0;//左右高度var query = uni.createSelectorQuery().in(this);query.selectAll('.waterfall_left').boundingClientRect()query.selectAll('.waterfall_right').boundingClientRect()query.exec(res=>{leftH = res[0].length != 0 ? res[0][0].height : 0;//防止查询不到做个处理rightH = res[1].length != 0 ? res[1][0].height : 0;if(leftH == rightH || leftH < rightH){// 相等 || 左边小  this.goodsLeftList.push(this.newList.shift());}else{// 右边小this.goodsRightList.push(this.newList.shift());}});},}
}
</script>

目前已封装为组件传入参数list即可直接使用。因使用场景不同css自己因情况各自书写这里就不罗列了本文章主要分享实现思路理解之后可以做到举一反三

uni-app 实现瀑布流最简洁方案相关推荐

uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
.Net/C#分库分表高性能O(1)瀑布流分页
框架介绍依照惯例首先介绍本期主角:ShardingCore 一款ef-core下高性能.轻量级针对分表分库读写分离的解决方案,具有零依赖.零学习成本.零业务代码入侵 dotnet下唯一一款全自动分表 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
教你如何实现一个完美的移动端瀑布流组件（附源码）
背景瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
【实战】1364- 实现一个完美的移动端瀑布流组件（附源码）
背景瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
uniapp开发：瀑布流灵活配置简单易用兼容vue2vue3小程序、H5、app等多端
概要支持的平台使用方式属性说明事件说明组件方法 refresh的使用示例隐藏单项图片示例完整示例温馨提示关注我,不迷路概要 custom-waterfalls-flow是一个瀑布流 ...
微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类
<微信小程序模仿开眼视频app(一)--视频首页.视频详情.分类> <微信小程序模仿开眼视频app(二)--搜索功能> 可到我的github账号上去copy文件瀑布流部分文 ...

uni-app 实现瀑布流最简洁方案

瀑布流实现效果

实现思路

代码理解

目前已封装为组件传入参数list即可直接使用。因使用场景不同css自己因情况各自书写这里就不罗列了本文章主要分享实现思路理解之后可以做到举一反三

uni-app 实现瀑布流最简洁方案相关推荐

最新文章

热门文章

uni-app 实现瀑布流 最简洁方案

瀑布流实现效果

实现思路

代码理解

目前已封装为组件 传入参数list即可直接使用。因使用场景不同css自己因情况各自书写 这里就不罗列了 本文章主要分享实现思路 理解之后可以做到举一反三

uni-app 实现瀑布流 最简洁方案相关推荐

最新文章

热门文章

uni-app 实现瀑布流最简洁方案

目前已封装为组件传入参数list即可直接使用。因使用场景不同css自己因情况各自书写这里就不罗列了本文章主要分享实现思路理解之后可以做到举一反三

uni-app 实现瀑布流最简洁方案相关推荐