uniapp的picker中數據過大導致的卡頓問題

起源

最近在做人事管理的項目，加了個新需求，可以指派下一個審核的人，心里想：這不是調兩個接口，一個查詢用戶。一個指派操作。

這么簡單的東西還不是分分鍾搞定。做完該做的交互，等到調測試接口的時候...... ,好家伙！這....4000多條數據

這瀏覽器不得卡的飛起。事實證明判斷的沒錯。每次喚起picker的時候界面都卡頓一下。

問題大綱

1. 因為此操作是在列表中，對單一項進行操作。每次進行指派的時候都會調用查詢用戶接口（顯然是不合理的）

   解決方案

   只需要把請求的數據拿回來的時候存在電腦上就ok啦,因項目沒有采用vuex（也不想再加了）。所以我們可以使用瀏覽器的本地緩存。

   當本地緩存的數據不存在的時候，調用函數，否則直接賦值即可

   代碼上

if(uni.getStorageSync('allUsers')){ this.workGroupeOptions =this.group(JSON.parse(uni.getStorageSync('allUsers')),100)[0] this.searchOption =JSON.parse(uni.getStorageSync('allUsers')) }else{ this.getUserList() }

2. 數據綁定在piker上的時候因數據項太多，生成的節點數太多，導致的卡頓。（要么后端做分頁，要么只有自己擼，公司的后端抱着多一事不如少一事的心態，顯然不願意搞，那就前端處理）

   解決方案

   既然數據太多的話那么我們可以把數據分成幾個批次依次加入到picker綁定的數據源中。

   理想的情況下當picker上滾動到倒數第10項左右的時候添加數據進去

   翻閱了一下uniapp的官網發現picker有個滾動時，觸發的change函數，並且向外部暴露了當前的每項的下標

到現在為止，已經找到解決的辦法

代碼上

分割數據的函數

第一個參數是要分割的數組對象，第二個分割的每一項里面包含多少項數據

group(array, subGroupLength) {
		      let index = 0;
		      let newArray = [];
		      while(index < array.length) {
		          newArray.push(array.slice(index, index += subGroupLength));
		      }
		      return newArray;
		  },

滾動事件的函數

這里新增了個num變量，是為了計算出已經新增到了第幾項數據，

到了最后num和分割出來的數據長度一致時，那么將不再新增數據

scrollChange(e){
		 let allUser =  this.group(JSON.parse(uni.getStorageSync('allUsers')), 100)
		let num =0
		if(e.detail.value[0]==this.workGroupeOptions.length-10){
		  num++
		  if(num!=allUser.length){
			allUser[num].forEach(item=>{
				this.workGroupeOptions.push(item)
			})
		    }
		}

結語

這個功能目前有個問題，就是當用戶一直滾動到最下面的時候，界面依然會導致卡頓。只不過是一個循序漸進的過程而已。有時間的話可以改造成picker里數據應該只包含我們分割出來的數據里面的三項。