效果：

實現

使用vantui組件 van-swipe-cell + van-card （商品卡片）

核心代碼

const currentPage = ref(1)
const pageSize = ref(4)
const totalSize = ref(10)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const checkList = ref([])

    <van-listv-model="loading":finished="finished"finished-text="沒有更多了"@load="nextPage"><van-swipe-cell style="margin-top: 10px"  v-for="item in checkList":key="item.artNo" :before-close="beforeClose"><van-card:thumb="item.masterUrl"><template #title><H4 style="text-align: left;float: left">自定義展示: 這是內容內容內容 </H4></template></van-card><template #right><van-button square text="刪除" type="danger" class="delete-button" /></template></van-swipe-cell></van-list>

onMounted(() => {//獲取圖片庫數據initGallery()})

const beforeClose = ({ position }) => {switch (position) {case 'left':case 'cell':case 'outside':return true;case 'right':return new Promise((resolve) => {showConfirmDialog({title: '確定刪除嗎？',}).then(() => resolve(true)).catch(() => resolve(false));});}
}

const initGallery = async () => {loading.value = true// useUserInfoStore.profilelet data = {pageNo: currentPage.value,pageSize: pageSize.value,artNo: artNo.value,styleAndSerial: serialAndStyle.value,// createUser}const res = await queryPagePicture(data);loading.value = falseconsole.log("獲取圖片庫數據 ==", res)if (res.code == 200) {//如果下拉刷新，數據清空重新獲取第一頁if (refreshing.value) {checkList.value = []refreshing.value = false}totalSize.value = res.totalDatacheckList.value.push(...res.list)console.log("checkList",checkList.value)// 如果數據加載完畢，finished 標志位置為 true，滑到頁面底部則不會再觸發 nextPage() 方法了。// currentPage 重置為 1if (checkList.value.length >= totalSize.value) {finished.value = truecurrentPage.value = 1}}
}

const nextPage = async () => {loading.value = falsecurrentPage.value += 1await initGallery()
}

.delete-button {height: 100%;
}