评论

【技巧】swiper仿tab切换

tab在开发中经常会用到,本文主要介绍了怎么实现一个tab的效果

大家好,上次给大家分享了swiper多图片的解决方案:https://developers.weixin.qq.com/community/develop/article/doc/0008aa4fdbce08405c288f37951813

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

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

首先先看下效果

实现原理很简单,利用小程序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://developers.weixin.qq.com/s/89OO1smX736d

最后一次编辑于  02-26  (未经腾讯允许,不得转载)
点赞 1
收藏
评论

3 个评论

  • 十年雪落i
    十年雪落i
    10-10

    不能触发页面的上滑加载  onReachBottom 请问上滑加载更多怎么做到啊


    10-10
    赞同
    回复
  • 刘建oooo
    刘建oooo
    02-26

    有个bug,点击tab会触发两个事件:点击事件和轮播图切换事件。 这样对获取数据并不是很友好。


    02-26
    赞同
    回复 2
    • var 友原
      var 友原
      02-26

      谢谢提出,已修改

      02-26
      回复
    • 刘建oooo
      刘建oooo
      02-26回复var 友原

      哈哈哈 满意 很棒

      02-26
      回复
  • @
    @
    02-21

    swiper-item很多的时候,会渲染非常慢,即使是隐藏状态

    02-21
    赞同
    回复