E企盈营销工具技术服务商 热线:4006-838-530

小程序商城瀑布流商品展示实现

E企盈直播平台营销卖货系统

现在小程序商城越来越多,通常的商城中,商品展示都是那种常规的两列规则展示,但是现在越来越多的应用开始采用瀑布流的方式来展示商品,商品的图片高度不定,商品根据图片容器大小,自由排列,依次下排。 今儿,小圣贤君就为大家讲解一下,如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列,通过接口拿到数据后,判断现有的两列的长短,将商品加入到列高较短的那一列中,如何判断两列的高低呢? 其实很简单,直接根据图片的高度来判断就可以。 假设有所有的数据都放在activitys这个数组中,那么activitys1代表存放第一列的数组,activitys2边存放第二列的数组。 在页面中创建一个隐藏的view,循环出所有的图片,类似下面的代码view style=’display: none;’    image wx:for=”{{activitys}}” wx:key=”id” id=”{{item.id}}” src=”{{item.imageUrl}}” bindload=”onImageLoad”/image  /view这里绑定了一个bindload方法,在该方法中,可以拿到每个图片在页面中显示的高度。 onImageLoad方法如下:/**   * 图片加载函数   * 图片加载完成后,根据图片的高度,依次往第一列和第二列中推入数据   */  onImageLoad: function(options) {    console.log(options)    let currentId = options.currentTarget.id;    let imageWidth = options.detail.width; // 图片宽度    let imageHeight = options.detail.height; // 图片高度    let activitys = this.data.activitys; // 获取所有的数据资源    let activityObj = null;    for (let i = 0; i activitys.length; i++) {      if (activitys[i].id === currentId) {        activityObj = activitys[i];        break;      }    }    let imagesCount = this.data.imagesCount – 1;    let activitys1 = this.data.activitys1;    let activitys2 = this.data.activitys2;    if (colOneHeight = colTwoHeight) {      colOneHeight += imageHeight;      activitys1.push(activityObj)    } else {      colTwoHeight += imageHeight;      activitys2.push(activityObj);    }    let data = {      imagesCount: imagesCount,      activitys1: activitys1,      activitys2: activitys2    }    if (!imagesCount) {      data.activitys = [];    }    this.setData(data);  },其中colOneHeight 和colTwoHeight是两个全局变量,分别记录两列的高度。 因为在页面中,两列的宽度是相等的,图片的宽度也都是相等的,高度自适应,所以,计算图片的高度就可以判断两列的高度。 思路: 1.当没有数据的时候,直接在第一列加入商品。 2.判断两列已有的数据,在高度较小的那一列加入商品数据,同时更新该列的全局高度数据,方便后面的判断。 效果图: 有问题可以留言联系博主,欢迎关注博主——小圣贤君。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序商城瀑布流商品展示实现
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏