微信小程序swiper无限数量不卡顿轮播图组件

更新记录

1.1.4（2023-05-12）

为方便用户，更新插件中的js工具类，使用未压缩版本。

1.1.3（2023-05-11）

细节优化。

1.1.2（2023-05-11）

代码优化。

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.6.10	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

插件内包含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>

下面是微信开发工具版使用示例：

//这里引入封装的工具类方法
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变量里后，初始化swiper
    initSwiper(this, list, () => {
      //这里是初始化完后的回调，你可以写自己的逻辑了，例如拿到当前swiper-item
      console.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啦");
    });
  }

})

微信小程序swiper无限数量不卡顿轮播图组件轮播图，不限数量，不卡顿，swiper 轮播

更新记录

1.1.4（2023-05-12）

1.1.3（2023-05-11）

1.1.2（2023-05-11）

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

个性自定义3d轮播图，拥有丰富的API属性及事件设置

饼环折线柱状图进度条图表示例

饼环折线柱状图进度条图表示例（vue2最小体积版）

一套全端通用的积分中心页面

大转盘抽奖示例

微信小程序swiper无限数量不卡顿轮播图组件 轮播图，不限数量，不卡顿，swiper 轮播

更新记录

1.1.4（2023-05-12）

1.1.3（2023-05-11）

1.1.2（2023-05-11）

平台兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

个性自定义3d轮播图，拥有丰富的API属性及事件设置

饼环折线柱状图进度条图表示例

饼环折线柱状图进度条图表示例（vue2最小体积版）

一套全端通用的积分中心页面

大转盘抽奖示例

Modal title

微信小程序swiper无限数量不卡顿轮播图组件轮播图，不限数量，不卡顿，swiper 轮播