美文网首页
【小程序】swiper仿tab切换

【小程序】swiper仿tab切换

作者: _鹅不食草_ | 来源:发表于2019-07-28 11:12 被阅读0次

大家好,上次给大家分享了swiper多图片的解决方案:https://www.jianshu.com/p/04d2f6568572

今天再给大家分享一个关于swiper的小技巧,利用swiper仿tab切换。

相信大家在app或浏览器上阅读新闻时,比如今日头条,会有这样一个场景,左右滑动的时候可以切换不同栏目,体验非常好,但是小程序好像没有提供相关组件,如果想实现这种效果该怎么做呢今天就给大家介绍一下在小程序里是怎么实现的。

首先先看下效果

image

实现原理很简单,利用小程序swiper再配合scroll-view就能实现,不过这里面有几点需要注意一下:

1.scroll-view一定要给一个高度,不然会有问题;

2.切换的时候只显示当前的swiper-item里的内容,其它swiper-item里的内容可以先隐藏掉,这是因为如果你的swiper-item里的图片太多的话可能会造成页面回收,因为新闻列表大多是图文列表,而tab经常是不止两个的,可能是7、8个或更多,如果每个tab都显示的话到时上拉加载页面会非常庞大,所以这里我建议不用显示的内容先隐藏,记住是swiper-item里的内容不是swiper-item,到时切换回来时再重新渲染,如果你要保存滚动的位置还要做其它的一些处理,这里就不仔细讲解了;

3.这里适用的是整个页面都是tab切换的,如果只是在页面的某处实现tab切换,还要考虑高度的问题,加载数据的时候根据数据个数长度来计算高度,每次加载数据都要计算高度,切换到不同的tab也是,这部分比较麻烦,因为要计算,不过并不难,只要

计算正确的话是没有问题的;

大概就是这样,基本实现思路,大家可以根据这个思路去拓展,在上面加上自己的功能,over!

代码片段:https://github.com/HaveYuan/swiper_for_tab.git

相关文章

网友评论

      本文标题:【小程序】swiper仿tab切换

      本文链接:https://www.haomeiwen.com/subject/uggvrctx.html