相信各位在開發(fā)的時(shí)候應(yīng)該有遇到這樣一個(gè)場(chǎng)景错沽，比如商品的圖片瀏覽楼肪，有時(shí)圖片的瀏覽會(huì)很大寿桨，多的時(shí)候達(dá)幾百?gòu)埢蛏锨埶竟猓@樣就需要swiper里需要很多swiper-item琅坡，如此一來(lái)渲染的時(shí)候就會(huì)很消耗性能，渲染時(shí)會(huì)有一大段的空白時(shí)間残家，有時(shí)還會(huì)造成卡頓榆俺，體驗(yàn)非常差，下面給大家介紹一下我的解決方案坞淮。
首先是wxml結(jié)構(gòu)：
image
js：
image
image
主要是利用current屬性茴晋，swiper里面只放3個(gè)swiper-item，要顯示的圖片放在第二回窘，第一和第三放的是加載的動(dòng)畫背景诺擅，步驟如下：
- 將請(qǐng)求到的數(shù)據(jù)存入一個(gè)數(shù)組picListAll內(nèi)，這里不需要setData啡直，只需要在data外面定義一個(gè)變量就行了烁涌，以減少渲染性能苍碟；
- 把要顯示的圖片路徑賦值給picUrl；
- 切換的時(shí)候根據(jù)bindchange獲取current屬性撮执，當(dāng)current改變時(shí)判斷當(dāng)前圖片在picListAll的index微峰，根據(jù)index拿到圖片再賦值給picUrl；
主要實(shí)現(xiàn)步驟就是以上3 步抒钱，比較簡(jiǎn)單蜓肆，要注意的是當(dāng)切換到第一張和最后一張的時(shí)候要判斷一下，把loding動(dòng)畫去掉继效，請(qǐng)求的時(shí)候還可以傳入index參數(shù)以顯示不同的圖片症杏，方便從前一頁(yè)點(diǎn)擊圖片進(jìn)入到此頁(yè)面時(shí)能定位到該圖片装获，例子里我是自己mock數(shù)據(jù)的瑞信，只是為了展示，如果你有服務(wù)器的話可以弄幾百?gòu)埧纯葱Чㄔィ瑢?duì)比直接渲染和用以上方式渲染的差異凡简。當(dāng)然,這只是我的解決方案,如果各位有更好的方案歡迎一起討論,一起進(jìn)步。
