VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果)

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如何在小程序中实现截断瀑布组件?下面这篇文章介绍了微信小程序实现截断瀑布组件的方法,希望对你有所帮助!

谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果)

瀑布是一种常见的布局方式,实现方式有很多种,比如直接分成两列,然后控制在左右两列添加元素;另一种方法是通过绝对定位来放置两边。【相关学习推荐:小程序开发教程】

本文要介绍的瀑布不同于常规的瀑布,因为瀑布可能会在中间被截断:

1.png

对于上面的布局,如果强行分成两列进行布局,是不合适的。所以我用绝对定位进行布局。由于瀑布中元素的高度不是固定的,所以我必须找到一种方法来获得每个元素的高度,然后确定元素应该放在一整行中,左边还是右边。

让我们先来看看模板部分的实现:

ltview class = 容器 style = 高度:{ { height } } px" gt lt查看wx:for = ;{ { list } } wx:key = ;索引 style = { { item.style } } class = 包装 gt lt抽象项目= { { item } } / gt; lt/view gt; lt/view gt; ltview wx:if = ;{ { tmp } } class = 计算-区域 gt ltview class = 包装 gt lt抽象项目= { { tmp } } / gt; lt/view gt; lt/view gt;模板相对简单,一个容器容器,然后循环数组,水平呈现一堆包装容器。

包装容器是一个绝对定位的包元素,包装容器需要放置需要实际呈现的组件。为了更加灵活,我将这个渲染组件设置为虚拟节点,可以指定使用组件时需要实际渲染的自定义组件。

因为包装元素是绝对定位的,所以我们需要手动保持整个容器的高度。

这里有个问题,我们怎么得到里面元素的高度?模板中的Computed-zone就是为了解决这个问题。在将元素放入数组之前,我们在computed-zone中渲染元素,然后通过WXML api得到元素的实际渲染尺寸,这样就可以知道实际渲染的元素的宽度和高度。

有了每个元素的渲染尺寸信息,我们需要确认该元素是占据了整行还是一半:

如果元素的渲染宽度与容器的渲染宽度相同,则可以判断该元素覆盖了一整行,需要将包容器的包装器设置为一整行的宽度;

如果不满足1条件,则应该根据左侧和右侧元素的总高度将包装放在左侧或右侧。

经过分析,需要写一点逻辑的是计算包装器的偏移量,处理是放在左边还是右边,还是占据整行。核心代码实现如下:

{//Make setData Promise,方便使用$ setData(data){ return new Promise(resolve = >;{this.setData(data,()= gt{ resolve();});});},//获取渲染大小getRect (item) {return this。$ setdata ({tmp: item,})。然后(()= >;{返回新承诺((解决,拒绝)= gt{ const query = this . createselectquery();//小心使用这个,不要使用wx前缀query . select( # 39;. computed -区域。包装 # 39;).boundingClientRect();query . exec(ret = gt;{ if(ret[0]){ resolve(ret[0]);} else { reject( # 39;找不到dom!');}});});});},//添加一个元素,内部使用additem(item){ let tick = this . tick;返回this.getRect(item)。然后(rect = gt{如果(打勾!= = this . tick){ return promise . reject( # 39;剔 # 39;);} const { margin } = this.data设{ height,width } = rectconst window width = this . sysinfo . window width;设[ leftTotal,right total]= this . height;// leftTotal左列高度,rightTotal右列高度,let margin px = this . sysinfo . getpx(margin);let style = # 39';if(math . ABS(width -window width) lt;3) {//全屏宽度style = ` left:0;top:${ Math.max(leftTotal,right total)} px;宽度:100%;`;left total = right total = math . max(left total+height,right total+height);} else if(right total lt;LeftTotal) {//放入右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 = [lefttotal,right total];//记录最新的左右高度返回此。$ setdata({[target key]:{ data:item,style,},height: math.max(左合计,右合计),});});},//实际添加元素使用,建立承诺队列,保证顺序一致。add(item){ let pending = this . pending | | promise . resolve();return this . pending = pending . then(()= gt;{ return this . additem(item);}).catch(err = gt;{ console . error(err);this.pending = null抛出err});},clear(){ this . tick = tick++;this.height = [0,0];this.pending = nullthis.setData({list: [],height: 0,});}}使用这个组件时,我们不能通过赋值数组直接渲染元素,而是通过添加(item)组件实例方法。因为我已经实现了队列,所以我可以直接循环add。如果关心状态,就判断最后一个元素的add操作是否完成。

这样实现的瀑布流比较灵活,但是性能消耗不低。有必要逐个获取元素的实际呈现大小。如果要支持窗口大小调整,消耗会很可怕。

对于那些需要看到代码细节的同学,我把实际的演示放在了Github和微信代码片段上。有需要的同学可以试试。

基于上述模型,其实也可以优化为只渲染可见区域内的元素,这样可以大大提高瀑布流的性能。希望有时间的同学可以完善一下。我就叉点赞~ o (▽ ?) D

有关编程的更多信息,请访问:编程视频!!以上是讲一个小程序中如何实现截断瀑布组件的细节。请多关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果) https://zhujicankao.com/74439.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!