主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何在小程序中实现截断的瀑布组件?下面这篇文章给大家介绍了使用微信小程序截掉瀑布组件的方法,希望对大家有所帮助!
瀑布流是一种常见的布局方式,可以通过多种方式实现,比如直接将其分为两列,然后控制在左右两列中添加元素;另一种方法是通过绝对定位来放置两边。【相关学习推荐:小程序开发教程】
本文介绍的瀑布流不同于传统的瀑布流,因为瀑布流的中间可能被截断:
对于上面的布局,如果强行分成两列是不适合的,所以我采用了绝对定位的方法进行布局。因为瀑布中元素的高度不是固定的,所以我必须想办法获得每个元素的高度,然后决定元素是放在一整行中,左边还是右边。
首先,让我们看看模板部分的实现:
模板比较简单,一个容器容器,然后循环数组,一级渲染一堆包装容器。
包装容器是一个绝对定位的包装元素,需要实际呈现的组件需要放在包装容器中。为了更加灵活,我将这个渲染组件设置为虚拟节点,您可以在使用组件时指定实际渲染的自定义组件。
因为包装器元素是绝对定位的,所以我们需要手动维护整个容器容器的高度。
这里的问题是,我们如何获得内部元素的高度?模板中的Computed-zone用于解决这个问题。在将元素放入数组之前,我们首先在computed-zone中渲染元素,然后通过WXML api获取元素的实际渲染大小,这样我们就可以知道元素实际渲染的宽度和高度。
有了每个元素的渲染尺寸信息,我们需要确认该元素是占据整行还是半行:
如果元素的渲染宽度与容器的渲染宽度相同,那么可以判断元素被一整行覆盖,需要将包装容器包装器设置为一整行的宽度;
如果不满足条件1,则需要根据左侧和右侧元素的总高度将包装放在左侧或右侧。
经过分析,需要一点逻辑的是计算包装器的偏移量,并处理是将其放在左边还是右边,还是占据整行。核心代码实现如下:
{//Make setData Promise,方便使用$ setData(data){ return new Promise(resolve =》{ this . setData(data,()=》{ resolve());});});},//获取元素getrect(item){ return this。$ setdata({ tmp:item,})。then()=》{ return new promise((resolve,reject)=》{ const query = this。createselectquery();//小心使用它,不要使用wx前缀query . select(& # 39;。computed -区域。包装& # 39;).boundingClientRect();query . exec(ret =》{ if(ret【0】){ resolve(ret【0】);} else { reject(& # 39;找不到dom!');}});});});},//添加元素,内部使用additive(item){ let tick = this . tick;返回this . get rect(item)。然后(rect =》{ if(tick!= = this . tick){ return promise . reject(& # 39;滴答& # 39;);} const { margin } = this.data设{ height,width } = rectconst window width = this . sysinfo . window width;let【left total,right total】= this . height;// leftTotal左列高度,rightTotal右列高度,let margin px = this . sysinfo . getpx(margin);let style = & # 39';如果(数学。ABS(width -窗口宽度)《3){//全屏宽度style = ` left:0;top:$ { math . max(left total,right total)} px;宽度:100%;`;left total = right total = math . max(left total+height,right total+height);} else if(right total《left total){//放在右边style = ` right:$ { margin px } px;top:$ { right total } px;`;right total+= height;} else {//放在left style = ` left:$ { margin px } px;top:$ { left total } px;`;left total+= height;} const { list =【】} = this . data;const target key = ` list【$ { list . length }】`;//通过直接操作数组下标来触发数组修改,从而大大提高了性能。这个。height =【left total,right total】;//记录最新的左右高度返回本。$ setdata({【target key】:{ data:item,style,},height:math . max(left total,right total,});});},//实际添加元素的使用,自己构建Promise队列,并保证相同的顺序Add(item){ let pending = this。待定||承诺。resolve();return this . pending = pending . then(()=》{ return this . additem(item);}).catch(err =》{ console . error(err);this.pending = null抛出err});},clear(){ this . tick = tick++;this . height =【0,0】;this.pending = nullthis . setdata({ list:【】,height: 0,});},}在使用这个组件时,我们不能直接通过分配数组来呈现元素,而是通过添加(item)组件实例方法来呈现元素,因为我已经实现了队列,所以我可以直接循环添加。如果您关心状态,只需判断最后一个元素的添加操作是否完成。
这样实现的瀑布流灵活性比较高,但性能消耗不低,需要逐个获取元素的实际渲染大小。如果窗口要调整大小,消耗是可怕的。
对于需要查看代码细节的同学,我将实际演示放在了Github和微信代码片段中,有需要的同学可以试一试。
基于上述模型,实际上它还可以优化为仅渲染可视区域内的元素,这可以大大提高瀑布流的性能。希望有时间的同学可以完善一下。让我在叉点赞~ o(~ ̄ ̄ ̄)d。
更多编程相关知识请访问:编程视频!!
以上是如何在小程序中实现截断瀑布组件的细节。更多资讯请关注主机参考等相关文章!
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:谈谈如何在applet中实现截断的瀑布组件(applet瀑布加载数据) https://zhujicankao.com/104810.html
评论前必须登录!
注册