理想是火,点燃熄灭的灯。
支持左右滑动,且位置记录自适应,巨丝滑
代码:
<!-- 滑动方案 --> <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
完事了吗?对!完事了。。
一举两得
之前尝试过scroll记录位置的,体验巨差,而且swiper的高度,也需要写js来计算。
这下真的舒服了..
作者: Bill 本文地址: http://biaoblog.cn/info?id=1677230612572
版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!