uniapp image 二次封装，新增loading和淡入效果

最新推荐文章于 2024-08-18 22:01:03 发布

yueF_L

最新推荐文章于 2024-08-18 22:01:03 发布

阅读量1.8k

点赞数 1

分类专栏： vue 前端大杂烩文章标签： uni-app image css loading

本文链接：https://blog.csdn.net/weixin_38982591/article/details/126483111

版权

前端大杂烩同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

20 篇文章 1 订阅

订阅专栏

该博客介绍了如何针对uni-app的image组件进行二次封装，以实现图片加载时的loading效果和淡入过渡效果。通过新增参数如showLoading、loadingColor，用户可以自定义loading图标颜色，并在图片加载完成后平滑淡入显示，提高了用户体验。

摘要由CSDN通过智能技术生成

在使用uniapp image 组件的时候会发现图片组件没有loading的效果，并且加载进来的图片没有过度效果，给人的根据比较生硬，针对这个问题对image组件做了二次封装。

开放自定义参数：

src 图片路径信息
mode 与uniapp一致
style 图片自定义样式
showLoading 是否显示loading效果
loadingColor loading icon 颜色

/**
* uniapp-image 二次封装
* 1.[新增] loading 效果
* 2.[新增] 淡入效果,之前uniapp-image展示有点生硬
*/
<template>
	<view class="f_image_content">
		<view class="title_image">
			<image :class="loading==true?'load-fade':''" :style="style" @load="loadingSuccess" :src="src" :mode="mode">
			</image>
			<view class="loading_icon" v-if="showLoading && !loading">
				<view class="circle" :style="formatLoadingColor"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// image address
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'widthFix'
			},
			// image css
			style: {
				type: String,
				default: 'width: 100%;'
			},
			// show loading
			showLoading: {
				type: Boolean,
				default: true
			},
			// loading icon color
			loadingColor: {
				type: String,
				default: 'red'
			}
		},
		computed: {
			formatLoadingColor() {
				return 'border-top-color:' + this.loadingColor;

			}
		},
		name: "f-image",
		data() {
			return {
				loading: false,
			};
		},
		methods: {
			loadingSuccess() {
				this.loading = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 淡入效果
	.load-fade {
		opacity: 1;
		animation: fade 1s linear normal;
	}

	@keyframes fade {
		from {
			opacity: 0
		}

		to {
			opacity: 1
		}
	}

	.title_image {
		display: flex;
		justify-content: center;
		position: relative;

		.loading_icon {
			position: absolute;
			top: 50%;
		}
	}

	.circle {
		box-sizing: border-box;
		width: 50upx;
		height: 50upx;
		display: inline-block;
		border: 5upx solid #f3f3f3;
		border-top: 5upx solid;
		border-radius: 50%;
		/* 动画旋转效果 */
		animation: rotate-360 1s infinite linear;
	}

	@keyframes rotate-360 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>