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

实现的功能

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

效果如图:



预览

代码

javascript 复制代码
<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在小程序会报错

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

相关推荐
游戏开发爱好者86 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析10 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖14 小时前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero1 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
FliPPeDround1 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
PedroQue991 天前
@meng-xi/uni-router
uni-app
Stone_zzl1 天前
uniapp写app做测试手机通知栏展示内容
uni-app
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp(15) 集成minio存储 支持本地和minio切换
java·vue.js·spring boot·uni-app
2501_916007471 天前
iOS 抓包工具有哪些?2025实用指南与场景推荐
android·ios·小程序·https·uni-app·iphone·webview