uni-app项目瀑布流布局,完美解决方案
source link: https://segmentfault.com/a/1190000040453477
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
uni-app项目瀑布流布局,完美解决方案
直接复制代码 <hd-list/> 列表布局数据自己写
<template>
<view class="waterfall-wrap">
<view class="waterfall-list">
<view class="left">
<hd-list
:listData="item"
v-for="(item,index) in goodsLeftList"
:key="index"
@onImageLoad="onImageLoad"
></hd-list>
</view>
<view class="right">
<hd-list
:listData="item"
v-for="(item,index) in goodsRightList"
:key="index"
@onImageLoad="onImageLoad"
></hd-list>
</view>
</view>
</view>
</template><script>
import hdList from "../component/hd-list.vue";
export default {
name: "waterfall",
props: {
listData: {
type: Array,
default: []
}
},
components: {
hdList
},
watch: {
/**
* 监听listData数据
*/
listData: {
handler: function(data) {
data.length > 0 && this.waterfallImage();
},
immediate: true
}
},
data() {
return {
goodsListCount: 0, //加载第i张图片
// 左侧商品列表
goodsLeftList: [],
goodsLeftListHeight: 0,
// 右侧商品列表
goodsRightList: [],
goodsRightListHeight: 0
};
},
methods: {
// 图片绑定事件，通过比较左右列表高度，实现瀑布流展示
onImageLoad: function(e) {
let divWidth = 342; //显示的单栏宽度，我设为342rpx
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let rImgH = (divWidth * oImgH) / oImgW + 32; //根据宽高比计算当前载入的图片的高度
if (this.goodsListCount == 0) {
this.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight
this.goodsListCount++; //图片索引加1
this.goodsRightList.push(this.listData[this.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
} else {
this.goodsListCount++; //图片索引加1
if (this.goodsLeftListHeight > this.goodsRightListHeight) {
//把图片的高度加到目前高度更低的栏中
this.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight
} else {
this.goodsLeftListHeight += rImgH;
}
if (this.goodsListCount < this.listData.length) {
//根据目前的栏高，把下一张图片，push到低的那栏
if (this.goodsLeftListHeight > this.goodsRightListHeight) {
this.goodsRightList.push(this.listData[this.goodsListCount]);
} else {
this.goodsLeftList.push(this.listData[this.goodsListCount]);
}
}
}
},
// 向商品列表添加第一张图片
async waterfallImage() {
this.goodsListCount = 0;
this.goodsLeftList.push(this.listData[0]);
}
}
};
</script>uni-app项目中使用都兼容
欢迎关注
欢迎关注小程序“进阶的大前端”，800多道前端面试题在线查看
Recommend
-
38
实现的栅格布局效果示意图
-
393
背景 最近在做跨平台框架的试点，选择了uni-app，并打算先在h5上开始试点。 由于uni-app提供的基于vue-cli的脚手架与我们内部的脚手架稍有些不同，直接使用稍微有点学习成本，所以fork了一下，稍作修改，做了一个内部版本的脚手架（主要就是将pub
-
35
背景 最近团队内部一直在试点用uni-app去做一些小需求，但主要是先在H5上做试点，之后再按计划编译成小程序去发布。这回分享几个遇到的小问题和解决方案。 下面说到的问题主要在用uni-app开发H5平台时才会遇到，非H5平台可忽略。 跨域的问题 首先，在本地
-
31
背景 目前闲鱼业务中无论是首页还是搜索页都有大量可以落地瀑布流的场景，而在Flutter原生中只提供了ListView, GridView，无法提供自定义布局的能力。 而在社区中，一般瀑布流的解决方案都是基于SliverMultiBox...
-
9
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2308
-
15
导语 在前端领域，经常会遇到瀑布流布局的开发，最近整理了下相关的使用场景和解决方案，其中包含了简单算法 DP，前端基础知识，业务场景的思考。
-
4
什么是WebView WebView是术语，是指网页视图。能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。 可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式...
-
6
敏捷项目已成为Sprint的瀑布项目 - Ben 敏捷项目已经变...
-
6
网上充满着不完善的基于RecyclerView的瀑布流实现，要么根本是错的、要么就是只知其一不知其二、要么就是一充诉了一堆无用代码、要么用的是古老的MVC设计模式。 一个真正的、用户体验类...
-
10
Html5（css3）的瀑布流布局的实现 浏览:3698次 出处信息 有一段时间没有写文章了，之前的几篇瀑布流布...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK