這一章學習了觸底加載更多阻止無效的網絡請求、分類列表存入Storage在預覽頁面讀取緩存展示、通過swiper的事件實現真正的壁紙預覽及切換

觸底加載更多阻止無效的網絡請求、load-more樣式的展現

前面已經學習了當列表觸底后，會繼續加載，當到最后一層后，給出一個已經沒有了的提示。這一章把這個功能繼續完成下。在老師的視頻中，給出了使用插件，z-paging插件，我這邊下載下來，試用了下，發現完全無頭腦，不會使用，只能是回歸到使用onReachBottom中，這里有許多細節，我這邊現在一步一步說。
當列表滑動到最后一層后，要給個提示，并且不能再讓獲取數據了，因為已經是最后一層了，在獲取數據只會消耗網絡，不會有新的數據了，這里設置一個標記符，const noData=ref(false),默認是false，當獲取到最后一層后，沒有數據的時候，那接口參數的默認值數量就會大于接口返回的數量，這就給noData變成true，讓不在加載數據了，這就達到了阻止無效的網絡請求了。

剛進入頁面后要給個正在加載的提示，這里使用組件uni-load-more，給設定是lading，就達到這個效果了，在實驗過程中，發現當進入的時候，會出現兩個或者是數據已經出來了但是提示框還在，這里就要使用定義的標記符和數據在頁面進行判斷了，

<!-- 這是頂部的刷新提示 -->
<view class="ladingLayout" v-if="!classList.length && !noData"><uni-load-more status="loading"></uni-load-more>
</view>
<!-- 這是底部的加載或者最后一頁的提示 -->
<view class="ladingLayout" v-if="noData || classList.length"><uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
</view>

上面就是刷新的時候，要進行判斷，這里記錄下兩個判斷的依據：
第一個v-if：這里是當剛進入頁面獲取數據，那數據集合是空的，noData也是false，這就提示正在加載，這里使用的是&&的關系，只有兩個都滿足，才會顯示uni-load-more
第二個v-if：當還沒有到最后一層的時候，不論是數據源還是noData，都已經變成true或者是有值，只有兩個中的任何一個滿足條件，就顯示uni-load-more；這里給uni-load-more的status設置了兩種情況，當noData是true的時候，uni-load-more就顯示的是沒有數據了，反之顯示正在加載
下面是設置的js

	const noData = ref(false)const getClassList = async () => {let res = await apiClassList(queryParams);classList.value = [...classList.value, ...res.data];if (queryParams.pageSize > res.data.length) {noData.value = true}uni.setStorageSync("storageClassList", classList.value);console.log(res);}// 觸底加載更多onReachBottom(() => {if (noData.value) return;queryParams.pageNum++;getClassList();})

這里提出一個概念，骨架屏，是什么？查了網絡才知道，其實就是設置的加載占位圖，就是前面做的這些，只是叫法不同而已。
在小程序中，出現一種情況，就是在虛擬機上，有個虛擬的home鍵，會把正在加載的提示給遮擋住，這里就需要用到前面學習的，設定一個安全高度，在html最下面，設置一個空的組件，設置安全高度，<view class="safe-area-inset-bottom"></view>;這里使用的class名稱，就是在公共區域設置的安全高度，想著可能使用安全高度的地方會很多，那就把這個區域高度放在公共css中，

.safe-area-inset-bottom{height:env(safe-area-inset-bottom);
}

env(safe-area-inset-bottom) 這就是我們設置的安全區域高度

數據存入Storage在預覽頁面讀取緩存展示

在項目中，是根據圖片的類型，獲取該類型下的圖片，獲取的數據會很多，然后點擊圖片進行預覽的時候，總不能每一次都獲取一次數據吧，這樣太消耗性能了，因此，在獲取到列表后，將列表數據放在緩存中，預覽的時候，只用從緩存中拿到數據源，在展示就可以了。
數據存儲到緩存
數據是一個對象，那么存儲到緩存的時候，就要使用：
uni.setStorageSync("storageClassList", classList.value);，storageClassList，這是名稱，方便在使用的地方根據名稱取值的，后面的是數據源。
獲取緩存的數據

const storageClassList = uni.getStorageSync("storageClassList") || []; //獲取緩存中的數據源

這就是獲取緩存數據，后面加的||[]，這是預防當緩存中沒有數據，給一個默認的值，
現在已經把數據拿到了，那就只用把數據放在頁面上進行渲染就可以了，

通過swiper的事件實現真正的壁紙預覽及切換

數據在頁面上已經顯示出來了，但是在滑動的時候，并沒有更改前面的數量，這里的數據是當前圖片的下標/總數，那要怎么使用這個呢？這里可以讓從列表上點擊的時候，就把當前圖片的id傳給預覽頁面，這樣就能根據findIndex將下標得到，通過swiper的屬性current屬性，可以讓顯示當前下標下的圖片，這個下標加一也是提示的位置，
這里把當前這個頁面的代碼全部給出，大家可以學習下，

<swiper circular :current="currentIndex" @change="swiperChange"><swiper-item v-for="item in classList" :key="item._id"><image @click="maskChange" :src="item.picurl" mode="aspectFilla"></image></swiper-item></swiper><view class="mask" v-if="maskState"><view class="goBack" :style="{top:getStatusBarHeigth()+'px'}" @click="toBack"><uni-icons type="back" size="20" color="#fff"></uni-icons></view><view class="count">{{ currentIndex +1 }}/{{classList.length}}</view>
<script setup>
const classList = ref([]); //數據源，const currentId = ref(null) //當前點擊的id，是從上一頁傳遞過來的const currentIndex = ref(0) //當前的下標const storageClassList = uni.getStorageSync("storageClassList") || []; //獲取緩存中的數據源classList.value = storageClassList.map(item => {return {...item,picurl: item.smallPicurl.replace("_small.webp", ".jpg")}})//獲取傳遞過來的idonLoad((e) => {currentId.value = e.id;//通過findIndex獲取下標currentIndex.value = classList.value.findIndex(item => item._id == currentId.value);})//這是定義的swiper的滑動事件const swiperChange = (e) => {currentIndex.value=e.detail.current;}</script>

以上就實現效果了，里面有注釋，有不對的地方歡迎指出。
學海無涯苦作舟,書山有路勤為徑！！！