uniapp微信小程序swiper无限数量不卡顿轮播图组件
创始人
2024-06-03 13:03:53
0

uniapp插件市场链接:uniapp微信小程序swiper无限数量不卡顿轮播图组件 - DCloud 插件市场

兼容性:

        仅支持微信小程序平台(其他平台没做测试),有uniapp框架版纯微信小程序开发工具版。

问题:

       你也遇到微信小程序swiper里要放大量数据的需求了吗,刚开始觉得就循环往里放么,但是真实操作时会发现刚开始滑着还行,到后面就卡的动不了了?

肿么办:

        原理是实际渲染的列表里只放最多3个元素(这里考虑到如果list只有1个或2个或3个的情况) ,在每次切换后更换这3个元素为最新的3个。

调试花时间:

       已经有调试好的工具类了,你只需简单的引入和调用,无需关注实现过程,仅在合适的位置写自己的逻辑即可,工具类获取方式:点击上方插件市场链接,确实花费了很多时间,所以需要您赞赏(门槛不限啦)后私信获取。

演示效果:

         微信扫一扫下方二维码查看演示效果,注意如果效果达到自己目的了再去插件市场哦,不浪费时间:

         

演示页面截图:

 

  代码调用示例: 


纯小程序开发工具版有么:

        当然是有了,开源了一篇文章你可以看下自己参考着使用,这个是没有进行封装的,链接为:微信小程序swiper不限数量不卡顿git仓库wx-swiper_KevyTian的博客-CSDN博客。

        当然也有花费了一定时间做了工具类封装,与上方调用类似的版本,需要的话在文章开头插件市场链接进入赞赏后私信获取

微信小程序版调用示例:

index.wxml代码:

{swiperList && swiperList.length>0}}" class="t-swiper" duration="{{duration}}" current="{{current}}" bindanimationfinish="itemChange">{swiperList}}" wx:for-item="item" wx:key="index" wx:for-index="index">{item.bgImg}});">{{item.title}}{{item.desc}}注:上面swiper中共10000个带图片的item,点击下方序号快速跳转:999999199929993999499959996999799989999999

 index.js代码:

//这里引入封装的工具类方法,赞赏本插件后私信获取
import { initSwiper, leapToItem, changeSwiperItem, defaultParams } from '../../common/kevy-enhanced-swiper-wx-1.0.js';
//list -- swiper所有数据的存放列表
//duration -- 初始化设置的过渡时间
var { list, duration } = defaultParams;
//测试图片背景,这块为了测试带图片且数据量大也不存在性能问题
const bgImg = 'https://img-blog.csdnimg.cn/140a01b8ad3f46bb9b970fdd85433ebe.png';
Page({/*** 页面的初始数据*/data: {swiperList: [], //swiper实际列表,里面放的swiper-item数量为1-3个current: 0, //swiper实际列表(swiperList)中当前可以看到的那个swiper-item对应的下标,从0开始duration: duration, //swipper-item元素切换动画过渡时间currItemNo: 1,//当前显示的swiper-item在所有数据的存放列表(list)中的序号,例如总数量list里共10000条数据,currItemNo=150是指当前显示的是第150条数据},/*** 生命周期函数--监听页面加载*/onLoad(options) {//这里去请求所有数据,如果接口是分页的就多请求几次拿到所有数据,不存在性能问题// uni.request({// ...请求逻辑// () => { list = res.data.list }// })//这里模拟请求到了所有数据,例如10000条,然后放到list数组里for (let i = 0; i < 10000; i++) {list.push({bgImg: bgImg,title: "[第" + (i + 1) + "个元素]我是一个无限制数量高性能的swiper",desc: "A. [第" + (i + 1) +"个元素]实现原理:\n\nB. swiper里永远最多只放3个元素,\n\nC. 在swiper切换时根据原来的下标计算新的需要显示的item对应下标,\n\nD. 然后组装好新的最多3个item数据渲染到页面"});}//请求到所有数据后放到list变量里后,初始化swiperinitSwiper(this, list, () => {//这里是初始化完后的回调,你可以写自己的逻辑了,例如拿到当前swiper-itemconsole.log(this.data.swiperList[this.data.current]);});},/*** swiper切换事件,这里监听的是切换完成动画事件*/itemChange(e) {changeSwiperItem(this, Number(e.detail.current), list, duration, () => {//切换完成//这里可以写自己的逻辑啦,例如去判断当前item是否收藏...console.log("切换完成,当前显示的是===", this.data.swiperList[this.data.current].title)});},/*** 跳到第n个item数据,n为序号从1开始*/leapTo(e) {leapToItem(this, Number(e.currentTarget.dataset.num), list, duration, () => {//这里是跳完之后,此时页面已经显示第n个item了,//你可以在这里写自己的逻辑了,例如判断当前item是否收藏,是否错题...console.log("已经跳转到第" + Number(e.currentTarget.dataset.num) + "个item啦");});}})

index.wxss代码:

.t-content {background-color: #f7f7f7;min-height: 100vh;
}.t-h-100p {height: 100%;
}.t-hover{opacity: 0.7;
}.t-w-100p {width: 100%;
}.t-wh-100p {width: 100%;height: 100%;
}.t-swiper {width: 100%;box-sizing: border-box;height: 500rpx;
}.t-item-con {background-size: 100% 100%;background-repeat: no-repeat;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;padding: 30rpx;box-sizing: border-box;
}.t-item-title {font-size: 36rpx;color: #ffffff;font-weight: bold;text-align: justify;
}.t-item-desc {font-size: 28rpx;color: #ffffff;margin-top: 30rpx;text-align: justify;
}.t-leap-desc {font-size: 28rpx;width: 690rpx;margin: 60rpx auto 0rpx;color: black;
}.t-leap {width: 663rpx;height: 100rpx;margin: 0 auto;box-sizing: border-box;padding: 15rpx;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;flex-wrap: wrap;
}.t-leap view {font-size: 24rpx;color: #fff;padding: 15rpx;background: #42b983;border-radius: 10rpx;width: 57rpx;height: 30rpx;text-align: center;line-height: 30rpx;margin: 10rpx;
}

最后,如果本文对您有帮助了,请帮忙点下赞哦,以便为更多的人提供参考。

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...