# uni-app swiper數量過多時卡頓優化方案,微信小程序swiper優化
#### 問題:
swiper數量達到大約400+時候會出現明顯滑動卡頓,渲染慢的問題,達到1000+時候需要幾十秒時間,或者可能導致渲染失敗。
#### 解決方案:
配置`circular="true"`屬性開啟銜接滑動,即播放到末尾后重新回到開頭。然后固定用于展示的swiper-item只設置3個,當滑動時候去替換展示的數據。這種方法可以展示幾千萬的數據展示都沒問題。
作者:虎牙工務員劉波
鏈接:https://www.jianshu.com/p/9ff63e181447
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
//頁面源碼
~~~xml
<template>
<view class="content">
<view class="title">{{originIndex +1 }}/{{ originList.length }}</view>
<swiper class="swiper" circular @change="swiperChange" swiperDuration="250">
<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
<view class="wrap_content">{{ item }} </view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
originList: [], // 源數據
displaySwiperList: [], // swiper需要的數據
displayIndex: 0, // 用于顯示swiper的真正的下標數值只有:0,1,2。
originIndex: 0, // 記錄源數據的下標
};
},
methods: {
/**
* 初始一個顯示的swiper數據
* @originIndex 從源數據的哪個開始顯示默認0,如從其他頁面跳轉進來,要顯示第n個,這個參數就是他的下標
*/
initSwiperData(originIndex = this.originIndex) {
const originListLength = this.originList.length; // 源數據長度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
this.originList[
originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
];
displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
this.originList[
originIndex + 1 == originListLength ? 0 : originIndex + 1
];
this.displaySwiperList = displayList;
},
/**
* swiper滑動時候
*/
swiperChange(event) {
const { current } = event.detail;
const originListLength = this.originList.length; // 源數據長度
// =============向后==========
if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
this.originIndex =
this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
this.initSwiperData(this.originIndex);
}
// ======如果兩者的差為-2或者1則是向前滑動============
else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
this.initSwiperData(this.originIndex);
}
},
},
created() {
for (let i = 1; i <= 1300; i++) {
this.originList.push(i);
}
this.initSwiperData();
},
};
</script>
<style>
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
}
.swiper {
height: calc(100vh - 120rpx);
}
.wrap_content {
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
background: gray;
height: 100vh;
color: aqua;
font-size: 80px;
margin: 0rpx 40rpx;
}
</style>
~~~
### 注意:
1、swiper-item的key一定要設置,并且用`index`。
~~~xml
<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
<view class="wrap_content">{{ item }} </view>
</swiper-item>
~~~
2、如果只有一張情況,不想讓它來回滾動。可以設置`circular`,但是`circular`無法直接動態設置,我們可以使用`computed`來設置
~~~jsx
<template>
<swiper :circular="!canCircular" > </swiper>
</template>
export default {
data() {
return {
originList:[]
}
},
computed: {
canCircular() {
return this.originList.length > 0; // 看這里重點
}
}
}
~~~
#### gitlab地址:
[https://gitee.com/xiaoguoyao/uni-app](https://links.jianshu.com/go?to=https%3A%2F%2Fgitee.com%2Fxiaoguoyao%2Funi-app)
最后編輯于:2022.01.08 19:10:30
- 后端
- composer
- composer配置國內鏡像
- composer安裝及設置2
- PHP
- 貝塔SG11加密
- 申請KEY
- 開始加密
- php 中連接tcp服務的三種方式
- php websocket 教程
- editor內容轉換數組
- 使用正則判斷中文維吾爾文
- PHP常用函數總結
- 常用助手函數
- 通過Imagick把pdf轉換圖片
- 維吾爾語基本區轉換擴展區
- php GD庫生成一個由文字和圖片生成新的圖片
- aes加密
- php數組函數 -- array_column,array_multisort 實現二維數組排序
- PHP操作Excel
- php更新內容
- 輔助查詢(*)
- 【時間】操作
- 時間函數例子
- Date/Time 函數(不包含別名函數)
- php網絡相關
- HTTP請求的返回值含義說明
- 使用php語言開發一個類似數據庫操作的文件表類
- pinyin
- 維吾爾語基本區轉換擴展區(2)
- php獲取當前環境的信息
- laravel
- laravel 隊列的使用
- laravel 自定義助手函數
- laravel seeder的使用
- laravel項目從git下載命令
- laravel 多個數據庫配置
- laravel 填充假數據
- laravel 動態路由
- laravel 自定義 validate 響應
- laravel 創建追加字段的模擬訪問器
- laravel 線上環境的數據庫更改或添加字段
- laravel 模型查詢按照whereIn排序
- laravel 使用 workerman 通過TCP 文件傳輸功能
- laravel api Header添加Accept頭
- Laraval IDE 自動補全插件 laravel-ide-helper
- laravel 網站后臺
- laravel 設置路由
- laravel-第三方composer包
- laravel 開發技巧
- laravel 昨天,今天時間
- 使用寶塔計劃任務啟動laravel調度器
- laravel結合workerman第二節
- Laravel - 上傳多個文件
- 查詢聊天好友列表
- 事件系統 event, listener
- laravel 安裝 laravel-modules
- 自定義求看守器-toekn
- laravel限流
- 使用 Laravel api Resource 類時自定義分頁信息
- Laravel php artisan命令大全
- 驗證器
- workerman 創建wss服務
- 架構師必須知道的26項PHP安全實踐
- python
- Python讀取文件代碼塊已經備好,用的時候光拿(建議收藏)
- Python常用庫大全
- api 簽名驗證
- git
- git命令
- 十分鐘學會git基礎
- Git代碼同時上傳到GitHub和Gitee(碼云)
- Git - 多人協同開發利器,團隊協作流程規范與注意事項
- 刪除遠程倉庫的文件
- github查詢方法
- 錯誤
- 解除項目git版本控制
- linux
- sentos安裝supervisor
- PHP怎么守護進程運行php腳本
- 600條最強Linux命令總結
- centos開啟防火墻、開放指定端口
- 前端
- vue
- vue2發布之前的config簡單配置
- vue2安裝scss命令
- vue2父子組件之間雙向數據綁定
- 國際化雙語--安裝VueI18n
- vue3-setup 組件傳參(defineProps、defineEmits、defineExpose
- Vue3 新寫法速覽:十分鐘內輕松get
- 關于vue的外連接
- watch講解
- computed
- webpack 打包后生成很多小文件怎么優化?
- vue2 vue.config.js常見配置和打包部署測試
- 小程序
- 小程序長期訂閱消息
- 小程序自定義TabBar后如何實現keep-alive
- 收藏的html和css和js
- CSS 省略號(單行省略號、多行省略號)
- UyghurInput_a.js
- font.css
- 漂亮按鈕樣式
- clock.html
- css
- scroll css樣式
- CSS流動布局-頁面自適應
- css grid布局
- 禁止wap頁面調整字體大小
- CSS @media 和 min-width/max-width
- 網站變灰是怎么實現的
- 瀑布流實現方式
- javascript
- SortableJS拖動排序
- wondow scroll滾動到上邊
- 原生js插入HTML元素
- Konva.js —— 像操作DOM一樣操作canvas
- 通過canvas合并倆個圖片
- js scroll更多加載
- js 實現復制功能
- js判斷安卓和蘋果或者微信
- 瀏覽器打開控制臺禁止
- 原生js一些dom操作
- js http客戶端集合
- fetch
- axios
- canvas 點鐘
- layer dialog
- jquery 和 laravel ajax全局配置
- layui 獲取select的自定義參數
- konva.js中文開發文檔
- js 大文件分片上傳
- js監聽網絡狀態實現斷網重連后自動刷新頁面
- js生成video縮略圖
- JS獲取當前系統電量情況
- uniapp
- uni-app swiper數量過多時卡頓優化方案
- uniapp 帖子集合
- 微信wap
- wap分享朋友和朋友圈
- wap 手機頁面微信支付
- JsSdk微信公眾號支付
- 通用各種小知識
- 正則表達式
- JS正則匹配過濾字符串中的html標簽及html標簽內的內容
- 判斷維吾爾文輸入
- 正則表達式符號
- 正則表達式練習
- 百度網盤不限速下載助手
- 解決VSCode下載慢或下載失敗的問題
- 性能測試 使用Apache的ab測試工具
- nginx從入門到精通
- nginx
- Nginx 是怎么禁止訪問php的 ?
- 寶塔面板
- supervisor
- 卸載寶塔
- redis
- redis實用筆記
- redis入門到精通
- phpredis
- redis數據庫基礎
- PHP對Redis的基本操作
- ffmpeg
- 合并多個音視
- 獲取音視時長
- FFmpeg視頻處理入門教程(新手必看)
- 外連接
- 安裝
- PHP基于ffmpeg實現轉換視頻,截圖及生成縮略圖的方法
- Linux安裝ffmpeg
- docker
- 服務實現
- docker基本命令
- rewrite筆記
- 別人筆記鏈接
- 計算機常用知識
- 二進制1-10
- 斐波那契數列
- mysql
- 高性能高可用的MySQL,得從各種規范開始
- 讀寫分離配置
- 重要外連接,前端/ 后端/數據庫等等
- 關于程序必須收藏的文章鏈接集合
- markdown
- 一篇文章講清楚markdown