当前位置：首页 > news >正文

uniapp实现图片预览，懒加载，下拉刷新等

news 2025/7/3 14:39:10

实现的功能

懒加载 lazy-load --对小程序起效果
图片预览
下拉刷新
触底加载更多
底下设置安全距离env(safe-area-inset-bottom)
右下角固定图标置顶及刷新功能

效果如图：

在这里插入图片描述

预览

代码

<template><view class="image-classify"><uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control></view><view class="image-list"><view v-for="(item, index) in imageList" :key="item._id" class="image-card"><image lazy-load :src="item.url" mode="widthFix" @click="previewImage(index)"></image><view class="text">{{ item.author }}</view></view></view><view class="fixed-button-wrap"><view class="fixed-button" @click="goRefresh"><uni-icons type="refreshempty" size="30" color="#444950"></uni-icons></view><view class="fixed-button" @click="goTop"><uni-icons type="arrow-up" size="30" color="#444950"></uni-icons></view></view><!-- 加载更多 --><uni-load-more status="loading" :content-text="contentText" class="load-more" />
</template><script setup>let imageList = ref([])let current = ref(0)const classify = [ { key: 'all', name: '全部' }, { key: 'dog', name: '狗狗' }, { key: 'cat', name: '猫咪' } ]const items = computed(() => classify.map(item => item.name))const contentText = {contentrefresh: '加载中',contentnomore: '没有更多'}uni.showLoading({title: '加载中'})function getImageList() {return uni.request({url:"https://tea.qingnian8.com/tools/petShow",data: {size: 5,type: classify[current.value].key},header:{'access-key':"zhaohui6968613"},success(res) {console.log(res)imageList.value = [...imageList.value, ...res.data.data]},fail(err) {console.log('err', err)},complete() {uni.hideLoading();}})}getImageList()function onClickItem(e) {current.value = e.currentIndeximageList.value = []getImageList()}// 下拉刷新onPullDownRefresh(async() => {imageList.value = []await getImageList()uni.stopPullDownRefresh()})// 触底加载onReachBottom(() => {getImageList()})// 图片预览function previewImage(index) {const urls = imageList.value.map(item => item.url)uni.previewImage({current: index,urls})}async function goRefresh() {uni.startPullDownRefresh()imageList.value = []await getImageList()uni.stopPullDownRefresh()}function goTop() {uni.pageScrollTo({scrollTop: 0})}
</script><style lang="scss" scoped>.image-classify {padding: 50rpx;}.image-list {.image-card {margin: 50rpx;box-shadow: 0 4rpx 4rpx 10rpx #eee;.text {padding: 10rpx;text-align: right;}}}.fixed-button-wrap {position: fixed;padding-bottom: env(safe-area-inset-bottom);right: 50rpx;bottom: 0;display: flex;flex-direction: column;.fixed-button {display: flex;width: 100rpx;height: 100rpx;justify-content: center;align-items: center;margin: 10rpx;border: 1px solid #eee;border-radius: 50%;background-color: #fff;}}.load-more {height: calc(env(safe-area-inset-bottom) + 50rpx);}
</style>