小程序开发

微信小程序开发瀑布流解决方案

编辑时间:2019-08-24 14:53  浏览次数:浏览次数
摘要:微信小程序开发瀑布流最简单的实现方案,不适用有分页的场景。 网上能搜到的小程序瀑布流解决方案,要么代码复杂、逻辑混乱,要么实现不了业务功能,所以把项目中的实现方案给大家分享下。 最简单的实现方案,不适用有分页的场景。 这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数,一般瀑布流都是2列,所以可以定义class .list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间距
} 注意,瀑布流的卡片需要css属性 display: inline-block; 将卡片设置为 内联元素。image 组件设置缩放模式 mode=widthFix 来保持图片宽高比。 column-count 属性默认是以列的形式来填充数据的。比如我们有20条数据,1 ~ 10 条数据会展示在左边第一列,11 ~ 20 条数据会展示在第二列。
如果有分页,再往数组中增加20条数据后,就会变成 1 ~ 20 条数据会在左边,21 ~ 40 条数据会展示在右边。用户体验非常差。
由于 column-fill: balance; 填充属性无效,无法指定填充顺序为行的形式。
所以这种实现方案只能一下加载完所有数据,不适用于分页。
Component实现瀑布流,功能强大,滑动流畅 通过自定义组件,用自己的思路实现瀑布流。然后在需要瀑布流的地方直接调用,方便复用。 没有Demo!! 跟着我的步骤一步一步来,就能轻松实现。 1.首先创建瀑布流自定义组件文件。
建议在项目根目录创建文件夹component,然后在该目录下创建文件夹WaterFallView,最后在WaterFallView下创建component。(鼠标右键->新建->Component)。
小程序开发瀑布流 2.设计瀑布流的wxml。 瀑布流的结构简单,只有左右2列。所以在设计UI的时候,布局很简单。
小程序开发瀑布流 左右两边,一边一个View。通过这两个View 来展示瀑布流的两列。每个View对应一个数据源,由此可见,这套思路的重点是这个两个数据源的处理。每个View中的template 为瀑布流中的卡片,就不介绍了。
超过两列的瀑布流比较少见,本篇不考虑,但可用本篇的思路来实现。 css样式
小程序开发瀑布流 具体实现逻辑 根据上面的 wxml 结构,这个组件的核心逻辑就是如何把要展示的数据item 放入leftList、rightList这两个数组中。
如何分配数据item?这个简单,我们可以定义2个变量 leftHight、rightHight,来分别记录leftList、rightList数组中图片的高度(可以理解为左边View、右边View的高度,其实只是图片的高度,但已满足瀑布流的的需求)。当leftHight 大于 rightHight时,把数据放入rightList,并让rightHight叠加数据中图片的高度。
当rightHight大于 leftHight 时,把数据放入leftList,并让leftHight 叠加数据中图片的高度。 if (leftHight == rightHight) { //第1个item放左边
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else if (leftHight < rightHight) {
leftList.push(tmp);
leftHight = leftHight + tmp.itemHeight;
} else {
rightList.push(tmp);
rightHight = rightHight + tmp.itemHeight;
} 瀑布流展示图片的时候,需要知道图片的宽高,然后根据图片的宽高比来设置 image组件的宽高。所以如果你们的数据没有宽高或宽高比,很难实现瀑布流。虽然可以通过代码获得图片宽高,但会对性能以及用户体验有很大影响,不推荐这么做。可以和后台同学商量下,看如何加上宽高数据。 Component有自己生命周期方法,甚至可以象Page一样,当做一个单独的页面使用。可以在他的生命周期方法中获得到瀑布流的宽度,以及图片的最大高度。
小程序开发瀑布流 拿到瀑布流的宽度后,就可以根据图片的宽高比,计算出 image 组件的宽高。
小程序开发瀑布流 在template中,image的宽高需要声明下。单位是px,不是rpx
小程序开发瀑布流 1.使用瀑布流 a. 注册自定义组件 在使用自定义组件的Page的json文件中声明要使用的组件 { .... usingComponents: { waterFallView: ../../component/WaterFallView/WaterFallView } } b. 在 wxml 中添加组件,并加上 id
小程序开发瀑布流

本文地址:https://www.webbj.cn/opertion/xcx1875.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
010-69759765186-1139-1767