Write the Code. Change the World.

6月 16

swiper 组件,通常会用来做轮播图使用。而它的动作表现形式,不仅仅可以做轮播图。比如多个长列表的横向切换。可是,swiper 自身不支持动态高度的。也就是它的高度是默认的,开始指定好的。当然,你也可以使用 js 去动态效果。一般,用 css 能搞定的,就不要去麻烦 js。还有,如果涉及到长列表,就要处理滚动问题以及动态加载问题。该怎么做呢。

尝试

  1. 组件自身有 onReachBottom 函数。当页面滑动底部会触发。如果不是最外层页面而是内部的滚动是不会触发的。比如可以将 swiper-itemoverflow 样式值改为 auto, 也是可以滚动的。只是这样一来触发不了 onReachBottom 函数,就没办法去动态加载了。这个时候,我们可以通过加载完数据后,ui 更新后,计算当前 swiper-item 的高度,然后给 swipe 动态设置高度实现。
# swiper 的 current
const tabIndex = ref(0);

# swiper 的高度
const swiperHeight = ref(300);

const calcSwiperHeight = function() {
    nextTick(() => {
        uni.createSelectorQuery().select(`#list${tabIndex.value}`).fields({size:true}, function(res){
            swiperHeight.value = res.height;
        }).exec();
    })
}

这种方式可以去试试,我没完全体验测试完毕。

  1. 使用 scroll-view 组件和 swiper 组件来嵌套使用。这样,就不需要动态的去计算 swiper 组件的高度了,而且 scroll-viewscrolltolower 函数,解决了动态加载的问题。记得将 scroll-view 放在 swiper-item 内。

这里将 swiperscroll-view 的高度固定。比如 height: calc(100vh - 200rpx);。具体多少,自己把控。

效果动图如下。上边是封装的 tabMenu 组件配合 swiper 一起,双向使用。当然你也可以不要 tabMenu。第一页,我特意设置单次请求数目(也就是 limit)为 5,并且重复拼凑了一些数据。因为总共只有 6 条数据,不足以拉到底部刷新。第二页,我将单次请求数目设置为 20 。第三页是没数据。看请求次数,切换了很多次,只请求了 4 次。这样实现,对页面请求次数也有好处。

布局还可以进一步优化。自定义导航栏,设置 navigationStylecustomer, 用 tabMenu 去补充这个位置。这样视觉上可能会更好一点,有用空间也会更大。不过呀,抖音小程序自定义导航栏的要求不好实现。百度小程序和微信小程序都没问题。

自定义导航栏后的效果。