一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    微信小程序swiper组件之终极优化丝滑方案

    技术 405 2023-02-24 17:23

    先看效果图:


    支持左右滑动,且位置记录自适应,巨丝滑

    代码:

        <!-- 滑动方案 -->
        <view class="uni-margin-wrap">
          <swiper
            @change="swiperChange"
            class="swiper"
            circular
            :indicator-dots="indicatorDots"
            :duration="duration"
            :current="current"
          >
            <swiper-item>
              <div class="paperBox">
                <paper :papers="papersReads"></paper>
              </div>
            </swiper-item>
    
            <swiper-item>
              <div class="paperBox">
                <paper :papers="papersDownloads"></paper>
              </div>
            </swiper-item>
    
            <swiper-item>
              <div class="paperBox">
                <paper :papers="papersCollects"></paper>
              </div>
            </swiper-item>
            <swiper-item>
              <div class="paperBox">
                <paper :papers="papersRandoms"></paper>
              </div>
            </swiper-item>
          </swiper>
        </view>
    


    我们修改的部分是要css,所以不考虑做js和dom的操作,

    比如之前我参考过记录不同tab滚动位置,然后切换时,滚到到对应的tab上次的位置去,

    这种每次切换都会都会有卡顿,体验贼差

    我们不考虑。


    我们的做法是利用每一个swiper-item的srcoll空间,

    而不是每个swiper-item都公用一个swiper父组件的公共scroll,

    在我们设置css之前,每个swiper-item的滚动位置是共享的,

    我们做的就是拆!


    首先外层的swiper设置:

    .swiper {
      width: 100%;
      height: 100%;
      text-align: center;
      position: fixed;
      z-index: 9;
    }
    


    这样swiper即是宽高100% 并固定在屏幕上。

    然后设置每个swiperItem的样式:

    .paperBox {
      z-index: 9999;
      height: 100%;
      position: relative;
      overflow: scroll !important;
    }
    

    需要设置个zindex 来覆盖父级dom

    完事了吗?对!完事了。。


    一举两得

    1. 位置记录
    2. .swiper自适应高度问题


    之前尝试过scroll记录位置的,体验巨差,而且swiper的高度,也需要写js来计算。

    这下真的舒服了..


    文章评论

    评论列表(0