微信小程序:swiper高度动态适配

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序:swiper高度动态适配相关的知识,希望对你有一定的参考价值。

ps:没有在swiper中添加scroll-view是为了可以使用页面的下拉刷新,最终方法直接跳到方案四。(含代码片段)

初始方案

swiper高度固定,swiper-item默认绝对定位且宽高100%,每个swiper-item中内容由固定高度的child组成,然后根据child数量动态计算swiper高度,初始方案(由于rpx针对屏幕宽度进行自适应,child_height使用rpx方便child正方形情况下自适应):

swiper_height = child_height * child_num

屏幕效果仅在宽度375的设备(ip6、ipⅩ)完美契合,其他设备都底部会出现多余空隙,并且在上拉加载过程中,随着内容增加,底部空隙也逐渐变大。

技术图片

方案二

开始以为是rpx适配显示问题,后通过文档中描述的WXSS 尺寸单位转化rpx为px(child_height使用rpx):

swiper_height = child_height * child_num * ( window_width / 750 )

然后并无变化,我们可以看到child_height在不同宽度屏幕下,显示的宽高尺寸是不一样的(px单位),那就尝试使用box在各个屏幕的实际高度进行计算swiper高度,box的高度可以单独在页面中增加一个固定标签,该标签样式和box宽高保持一致并且隐藏起来,然后在pageonload中通过wx.createSelectorQuery()获取标签实际高度baseItemHeightpx单位):

swiper_height = baseItemHeight * child_num

结果显示原本的ip6、ipⅩ没有问题,另外宽带小于375的ip5上也ok,但是在大于375的设备上还是出现空隙,比如ip的plus系列。

方案三

之前的方案都无法计算出合适的swiper高度,那就换个思路,比如去计算空隙的高度。

swiper底部有一个load标签显示“加载更多”,该标签紧贴box其后,通过wx.createSelectorQuery()来获取bottom,然而你会发现bottom是标签的heighttop的和。计算底部空隙(暂时忽略“加载更多”标签高度):

space_height = swiper_height - load_top

刚计算完可以看到在静止状态下,计算出space_height拿去修改swiper_height显示空隙刚好被清掉了,但是接着就发现在动过程中获取到的bottom是不固定的,也就是说数值可能不准确导致space_height计算错误,显示效果达不到要求。

方案四

基于上述方案,swiper底部的load标签绝对定位bottom:0,同时在swiper底部添加一个高度为0并且尾随内容box其后的标签(mark),然后获取这两个标签的top值之差:

space_height = load_top - mark_top

技术图片

代码片段 wechatide://minicode/adphcCm765Z8

这次获取到的空隙高度用于再计算swiper高度完美契合,美滋滋!!!

以上是关于微信小程序:swiper高度动态适配的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序怎样修改swiper组件中样式的修改

微信小程序swiper选项卡每个内容都小于一屏,怎么让内容高度自适应?

微信小程序关于swiper问题求助

微信小程序swiper滑动切换

微信小程序 swiper 组件坑

微信小程序swiper切换选项卡,每个选项卡内容不一样,,怎么让item的高度自适应