收藏
评论

微信小程序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


代码片段

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


最后一次编辑于  2018-05-23
收藏

8 个评论

  • 退格符
    退格符
    2019-03-04

    楼主,你这个是子元素是固定的啊,但是如果子元素不固定的话,怎么才处理?

    2019-03-04
    赞同 1
    回复 1
  • 南方的树
    南方的树
    2020-07-04

    代码打开不了,楼主可否分享一下代码?

    2020-07-04
    赞同
    回复 2
    • Sinea
      Sinea
      2020-09-05
      直接微信工具选择导入代码片段 把代码片段链接输入进去就可以了 wechatide://minicode/adphcCm765Z8
      2020-09-05
      回复
    • Sinea
      Sinea
      2020-09-05
      2020-09-05
      回复
  • 寻界
    寻界
    2019-05-08

    你已经写了百分之80了,改变一下想法就完成了的。改进后代码如下:https://developers.weixin.qq.com/community/develop/article/doc/000e24214b0d10de51880c8f556413

    2019-05-08
    赞同
    回复
  • 非凡
    非凡
    2018-06-20

    问题就在于设定swiper高度后 同时显示几行子元素,多了会挤在一起  少了间隙大


    2018-06-20
    赞同
    回复
  • 朝阳
    朝阳
    2018-06-11

    您好,您这个根本没哟用到swiper组件了啊

    2018-06-11
    赞同
    回复 1
    • Sinea
      Sinea
      2018-06-11

      这个是针对swiper高度适配的方法 高度都计算出来了 直接套上swiper就能用

      2018-06-11
      回复
  • D.pan
    D.pan
    2018-06-01

    这个很有用,感谢!

    2018-06-01
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-05-28

    swiper的父组件设置display:flex,swiper设置height:10rpx; flex:1 。10rpx是随便设的个值

    2018-05-28
    赞同
    回复 3
    • Sinea
      Sinea
      2018-05-28

      这里需要实现的需求是横向滑动切换版块、下拉刷新,横向滑动需要swiper,swiper主要是由swiper + swiper-item组成,swiper-item宽高自动设置为100%,这里需要上下滑动要么使用scroll-view,要么计算swiper高度。(swiper-item如果高度自动height:auto!important是无法撑开swiper的,又回到了计算swiper高度

      2018-05-28
      回复
    • 卢霄霄
      卢霄霄
      2018-05-28

      咦!居然是用swiper做的。。我直接看的图,以为是scroll-view呢。。我在说啥

      2018-05-28
      回复
    • Youngwell
      Youngwell
      2019-05-09回复Sinea

      用swiper实现横向滑动切换,如果一个swiper-item上下滚动到一个位置,其他的swiper-item都在同一个位置了

      2019-05-09
      回复
  • 春如旧
    春如旧
    2018-05-23

    代码 是否可以分享一波

    2018-05-23
    赞同
    回复 5
    • Sinea
      Sinea
      2018-05-23
      底部有代码片段分享
      2018-05-23
      回复
    • 春如旧
      春如旧
      2018-05-23回复Sinea
      多谢 我再思考下
      2018-05-23
      回复
    • 春如旧
      春如旧
      2018-05-23回复Sinea
      我的 swiper-item 在没有scroll-view时候 真机会卡顿。。。。 -webkit-overflow-scrolling: touch;
      2018-05-23
      回复
    • 春如旧
      春如旧
      2018-05-23回复Sinea
      我的 swiper-item 在没有scroll-view时候 真机会卡顿。。。。 -webkit-overflow-scrolling: touch;
      2018-05-23
      回复
    • Sinea
      Sinea
      2018-05-23回复春如旧
      卡顿问题暂时没有遇到 不过如果是图片流刷得很多且多个swiper-item同时保留图片 在我的16年红米note3上会有卡顿现象
      2018-05-23
      回复
登录 后发表内容