收藏
评论

【技巧】swiper仿tab切换

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


今天再给大家分享一个关于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


                                                                                                                                                                                            系甘先,得闲饮茶


最后一次编辑于  2019-02-26
收藏

5 个评论

  • 2019-08-23

    楼主用的什么录屏软件?

    2019-08-23
    赞同
    回复 2
    • var 友原
      var 友原
      2019-08-23
      LICEcap,很方便
      2019-08-23
      回复
    • 2019-08-23回复var 友原
      三克油^v^
      2019-08-23
      回复
  • Harlan
    Harlan
    2019-01-15

    我也是用swiper实现仿tab效果,在开发工具和iOS上没有问题,但在Android真机上操作会很卡,你这个有在真机上测试过了吗?

    微信版本7.0,小程序库版本2.5.0

    2019-01-15
    赞同
    回复 2
    • var 友原
      var 友原
      2019-01-15

      试过了,很流畅啊,你具体是怎么实现的

      2019-01-15
      回复
    • Harlan
      Harlan
      2019-01-23回复var 友原

      找到可能的原因了,我在scroll-view内有一个搜索框,去掉这个搜索框的话滑动起来就完全不卡,添加了input后,即使再将这input去掉滑动起来也还是不流畅

      2019-01-23
      回复
  • 洪三金
    洪三金
    2019-01-09

    试了一下,效果不错,赞

    2019-01-09
    赞同
    回复
  • Wcly👺
    Wcly👺
    2019-01-09

    学到了,解决了困扰多年的问题

    2019-01-09
    赞同
    回复 1
    • var 友原
      var 友原
      2019-01-09


      2019-01-09
      回复
  • 九歌^
    九歌^
    2019-01-09

    用 ui组件库 就可以了。现成的,封装好了的。

    这是最新的五端同步的方案,问题应该较多:https://uniapp.dcloud.io/

    这是最新的五端同步的方案,问题应该较多:https://nervjs.github.io/taro/docs/components-desc.html

    这是我们现在用的ui组件库:https://weapp.iviewui.com/docs/guide/start

    https://meili.github.io/min/docs/minui/index.html



    2019-01-09
    赞同
    回复 7
    • var 友原
      var 友原
      2019-01-09

      也可以,不过这得要看个人习惯了,我个人不太喜欢在项目里引入其它的东西,能原生就原生

      2019-01-09
      回复
    • 九歌^
      九歌^
      2019-01-09回复var 友原

      看个人喜好吧。因为主要是他们的做的ui组件 看着比自己写的好看。体验更好,可以查看他们的自定义组件源码学习。

      2019-01-09
      回复
    • var 友原
      var 友原
      2019-01-09

      能自己在源码上修改变成自己的就最好了

      2019-01-09
      回复
    • 九歌^
      九歌^
      2019-01-09回复var 友原

      蒽。他们的实现方式 看了感觉比自己的高级  -- 😄,多看源码

      2019-01-09
      回复
    • 随遇而安
      随遇而安
      2019-01-11

      如果每次都要计算高度的话,那么手指左右滑动切换时,页面衔接处会出现不流畅的感觉

      2019-01-11
      回复
    查看更多(2)
登录 后发表内容