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

biaoblog.cn 个人博客

发布于 2023-02-26 21:44:04

1.4K0

发布于 2023-02-26 21:44:04

文章被收录于专栏：web技术开发分享web技术开发分享

先看效果图：

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

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

代码：

? ? <!-- 滑动方案 -->
? ? <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

完事了吗？对！完事了。。

一举两得

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

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

这下真的舒服了..

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

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

css

javascript

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

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

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

css

javascript

登录后参与评论

0 条评论

热度