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

实现的功能

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

效果如图：

预览

代码

<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.currentIndex
		imageList.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>

说明

1.uni-ui 使用了图标，加载更多，上面tab按钮

2.下拉刷新不起效果记得改一下配置

3.https在小程序会报错

目前解决改一下小程序配置，如图 （后期打包时候需要配置上地址）