更新记录

1.1.0（2023-03-21）

免费哦 免费哦 完全免费哦。重要的事说3遍，一切尽在插件包zip内 插件内包含uniapp版和纯微信开发者工具版全部代码，如果本插件对您有帮助麻烦给个赞哦，以便帮助更多人作为参考，谢谢啦

1.0.1（2023-03-14）

1.本插件通过右方下载的仅是演示代码，缺少kevy-enhanced-swiper-1.0.js工具类，调试这类问题都比较费时间，所以需要赞赏付费后（多少无所谓啦）私信获取，介意的绕行哦； 2.仅支持微信小程序平台； 3.swiper中item数量没有限制； 4.支持跳转到某一个item，支持切换后回调； 5.微信扫码演示图片上的微信二维码查看演示效果。

平台兼容性

免费哦 免费哦 完全免费哦。重要的事说3遍，一切尽在插件包zip内 插件内包含uniapp版和纯微信开发者工具版全部代码，如果本插件对您有帮助麻烦给个赞哦，以便帮助更多人作为参考，谢谢啦

下面是uniapp版使用示例：

<template>
    <view class="t-content">
        <!-- swiper示例 -->
        <swiper v-if="swiperList && swiperList.length>0" class="t-swiper" :duration="duration" :current="current"
            @animationfinish="itemChange">
            <swiper-item v-for="(item,index) in swiperList" :key="index">
                <!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //开始 -->
                <view class="t-item-con t-wh-100p" :style="{'background-image': 'url('+item.bgImg+')'}">
                    <view class="t-item-title">{{item.title}}</view>
                    <text class="t-item-desc">{{item.desc}}</text>
                </view>
                <!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //结束 -->
            </swiper-item>
        </swiper>
        <!-- 下面这个是为了演示快速跳转到某一个item -->
        <view class="t-leap-desc">
            注：上面swiper中共10000个带图片的item，点击下方序号快速跳转：
        </view>
        <view class="t-leap">
            <view @click="leapTo" data-num="9">9</view>
            <view @click="leapTo" data-num="99">99</view>
            <view @click="leapTo" data-num="999">999</view>
            <view @click="leapTo" data-num="1999">1999</view>
            <view @click="leapTo" data-num="2999">2999</view>
            <view @click="leapTo" data-num="3999">3999</view>
            <view @click="leapTo" data-num="4999">4999</view>
            <view @click="leapTo" data-num="5999">5999</view>
            <view @click="leapTo" data-num="6999">6999</view>
            <view @click="leapTo" data-num="7999">7999</view>
            <view @click="leapTo" data-num="8999">8999</view>
            <view @click="leapTo" data-num="9999">9999</view>
        </view>
    </view>
</template>

<script>
    //这里引入封装的工具类方法，插件内包含uniapp版和纯微信版哦
    import { initSwiper, leapToItem, changeSwiperItem ,defaultParams } from '@/common/kevy-enhanced-swiper-1.0.js';
    //list -- swiper所有数据的存放列表
    //duration -- 初始化设置的过渡时间
    var { list, duration } = defaultParams;
    //测试图片背景，这块为了测试带图片且数据量大也不存在性能问题
    const bgImg = 'https://img-blog.csdnimg.cn/140a01b8ad3f46bb9b970fdd85433ebe.png';
    export default {
        data() {
            return {
                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() {
            //这里去请求所有数据，如果接口是分页的就多请求几次拿到所有数据，不存在性能问题
            // 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变量里后，初始化swiper
            initSwiper(this, list, () => {
                //这里是初始化完后的回调，你可以写自己的逻辑了，例如拿到当前swiper-item
                console.log(this.swiperList[this.current]);
            });
        },
        methods: {
            /**
             * swiper切换事件，这里监听的是切换完成动画事件
             */
            itemChange(e) {
                changeSwiperItem(this, Number(e.detail.current), list, duration, () => {
                    //切换完成
                    //这里可以写自己的逻辑啦，例如去判断当前item是否收藏...
                    console.log("切换完成，当前显示的是===", this.swiperList[this.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啦");
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .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;
    }
</style>