# swiper-limited-load-uni-app

**Repository Path**: mwbdtth/swiper-limited-load-uni-app

## Basic Information

- **Project Name**: swiper-limited-load-uni-app
- **Description**: uni-app Vue2 H5 swiper 组件长列表优化，以答题页面为 Demo 进行展示
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 18
- **Forks**: 4
- **Created**: 2022-09-20
- **Last Updated**: 2024-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Swiper, uni-app, H5, vue2

## README

# swiper-limited-load-uni-app

#### 介绍
##### uni-app swiper 组件长列表优化   
当前 Demo 以答题程序为示例
| 语言  | 版本 |
|-----|----|
| Vue | 2  |


  
参考于 GitHub 上的 pengboboer 这位大佬的[微信小程序 swiper 渲染性能优化](https://github.com/pengboboer/swiper-limited-load)   
在自己做一个 H5 的答题程序时，发现使用 swiper 实现左右滑动时，swiper-item 过多的情况，会导致程序卡顿，用户体验十分难受，所以在网上冲浪的时候，看到了 pengboboer 大佬，在微信开放社区写的关于微信小程序 swiper 优化文章，但是只是针对于微信小程序原生开发的，看到评论区蛮多人想要 uni-app 版本的，所以突发奇想（也顺便解决自己的问题）尝试性的开始编写 swiper-limited-load-uni-app 组件  

#### 示例
![示例图片](https://gitee.com/mwbdtth/swiper-limited-load-uni-app/raw/main/swiper.gif)

#### 使用说明

1.  可以直接下载源代码，将 components 目录下的 swiper-limit-load-uni-app 组件直接拿来使用