小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码

把一个数组根据数组内部的图片的高度，拆分成两个数组，组成瀑布流数据的方法。

使用方式：

async created() {var arr = this.$mock.sssdata.data.lists;//arr 是一个数组，里面包含若干对象，对象里面有图片var myArr = await this.getArrImgHeight(arr,'faceimg')//调用我封装的方法，图片属性是faceimgconsole.log('myArr',myArr)
},

arr的数据格式与取到的结果的数据格式：

封装的代码：

/* 函数说明：瀑布流获取图片高度计算方法，会把原数组拆分成两个数组返回参数说明：必填：arr：数组，里面有对象，对比对象里面的图片高度，返回两个数组attributeName：要根据数组里对象指定属性名称（图片的 Key）非必填：otherHeight：瀑布流的盒子其它组成部分的高度，例如点赞那列，因为瀑布流不单单是图片组成minHeight: 图片最小高度，如果没有图片，也会使用最小高度，相当于默认高度maxHeight:图片最大高度，高于就按照 maxHeight 算
*/
async function getArrImgHeight(arr = [], attributeName, otherHeight = 200, minHeight = 10, maxHeight = 1000) {var arr1 = [],arr2 = [],imgMargin = 0, //图片边距height1 = 0, //第一组图片累计高度height2 = 0; //第二组图片累计高度// var getSystemInfo = await wx.getSystemInfo()for (let i = 0; i < arr.length; i++) {let heightData = await uni.getImageInfo({src: arr[i][attributeName]});let ImgHeight = heightData.length == 1 ? minHeight : heightData[1].height //如果长度等于1，就是图片有问题，这时候设置一个默认高度，如果长度等于2，下标1就有图片高度let imgWidth = heightData.length == 1 ? minHeight : heightData[1].width //如果长度等于1，就是图片有问题，let height = ImgHeight;if (height < minHeight) height = minHeight;if (height > maxHeight) height = maxHeight;height = height + otherHeight;if (height1 <= height2) {height1 += heightarr1.push(arr[i])} else {height2 += heightarr2.push(arr[i])}console.log('1111111', height,height1,height2)// console.log('arr2',height1,height2,arr1,arr2);}return [arr1, arr2]
}

小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码相关推荐

微信小程序实现瀑布流（FlowLayout）效果
前言:小程序不同于安卓直接提供布局的配置,而必须要像写前端页面一样来写.并且小程序没有像web网页的DOM和BOM操作,准确的来说是存在这么个API的,但是我测试使用的时候,得到的数据总是不尽人意,地 ...
微信小程序实现瀑布流实例
瀑布流的效果图如下: 1.wxml中的代码如下  <view class="containers&qu ...
微信小程序实现瀑布流仿小红书
要做的小红书瀑布流效果 homepage.wxml代码 <!-- 瀑布流大概的思路就是,直接定义两列等宽的view,然后两列都加载相同的数据wx:if="{{index%2==1}}& ...
关于微信小程序简单瀑布流的制作
应业务需要,制作了简单的瀑布流,应用于购物平台. 首先是单个内容组件.考虑到后台计算的消耗,因而将内容里的图片高度采用直接输入.到时传入数据时需注意. <!--components/showit ...
微信小程序实现瀑布流，如何实现！
废话不多,不爱表达,直接上代码! 首先,瀑布流样式都知道左右高度是不一样的,所以需要我们写两套样式,左边和右边. <view class='left'><block wx:for=& ...
小程序实现瀑布流布局
** 小程序实现瀑布流 ** 实现效果如图:一:需求分析页面主要分成两列,每个条目的高度不固定,条目主要由封面图+标题+头像+发布者昵称组成多列排列要求,第一条在左侧,第二条在右侧,后续的根据左右两 ...
百度小程序如何引流？给用户带来了更便捷、更人性化的体验
百度小程序如何引流?给用户带来了更便捷.更人性化的体验百度小程序是百度官方最核心的业务,简单搜索核心词匹配,用百度APP打开,一个词只能一个人使用,如同我们的身份证一样,如果说这个词被别人使用了之后 ...
微信小程序实现瀑布流布局
微信小程序实现瀑布流布局实现的效果图如下显示: 一,需求分析布局分为两列,两列的高度随着图片的插入而改变默认给左右两列插入一张图片,插入图片后,根据两列的的高度做为判断依据,依次给高度更低的一列 ...
小程序商城引流软件，实现批零商企线上线下一体化
随着互联网.人工智能.大数据等科技的飞速发展,企业各项费用支出不断上升,产品销售.仓库管理.物料采购.财务管理等各方面业务都需要向数字化转型. 企业也越来越需要大数据分析提供营销策略支持. 没有留存顾 ...

小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码

小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码相关推荐

最新文章

热门文章