前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序swiper组件之终极优化丝滑方案

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

作者头像
biaoblog.cn 个人博客
发布2023-02-26 21:44:04
1.5K0
发布2023-02-26 21:44:04
举报

先看效果图:

http://biaoblog.cn:3000/uploads/1677230987632.gif

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

代码:

代码语言:javascript
复制
    <!-- 滑动方案 -->
    <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设置:

代码语言:javascript
复制
.swiper {
  width: 100%;
  height: 100%;
  text-align: center;
  position: fixed;
  z-index: 9;
}

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

然后设置每个swiperItem的样式:

代码语言:javascript
复制
.paperBox {
  z-index: 9999;
  height: 100%;
  position: relative;
  overflow: scroll !important;
}

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

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

一举两得

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

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

这下真的舒服了..

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先看效果图:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档