vue滑动加载

最新推荐文章于 2023-10-03 15:48:42 发布

令月十一

最新推荐文章于 2023-10-03 15:48:42 发布

阅读量254

点赞数

分类专栏：图片 vue element

本文链接：https://blog.csdn.net/weixin_44234050/article/details/119886978

版权

图片同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

element

5 篇文章 0 订阅

订阅专栏

vue滑动加载图片
当infi加载按钮进入视图中就触发图片加载
在这里插入图片描述

<html lang="zh-Hans">
	<head>
		<title>网站</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			#home {
				text-align: center;
			}

			/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			::-webkit-scrollbar {
				width: 6px;
			}

			/* 定义滑块 内阴影+圆角 */
			::-webkit-scrollbar-thumb {
				background-color: #1B1C1D;
			}


			.el-slider.is-vertical {
				right: 1%;
				bottom: 12%;
				position: relative;
				position: fixed !important;
			}

			.demo-image__lazy {
				width: 96%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				border-right: 4px dashed #eee;
			}

			.demo-image__lazy .el-image {
				margin: 10px;
				display: block;
				max-width: 300px;
			}

			.demo-image__lazy .el-image img {
				border-radius: 8px;
				object-fit: contain;
			}
		</style>
	</head>
	<body>
		<div id="home">
			<el-slider v-model="size" :min="min" :max="max" vertical height="300px"></el-slider>
			<div class="demo-image__lazy">
				<el-image :style="{maxWidth:size}" v-for="url in urls" :key="url.index" :src="url" lazy></el-image>
			</div>
			<el-button type="danger" @click="handleScroll()" plain>
				点击加载
				<i v-if="infi" ref="inFi" class="el-icon-loading"></i>
			</el-button>
		</div>
	</body>
	<script>
		let Main = {
			data() {
				return {
					size: 0,
					max: 900,
					min: 300,
					infi: true,
					urls: [
						'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
						'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
						'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
						'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
						'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
						'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
						'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
					]
				}
			},
			methods: {
				loadMore: function() {
					this.infi = false
					this.urls = this.urls.concat(this.urls)
					this.infi = true
				},
				isElementNotInViewport(e, h) {
					let rect = e.getBoundingClientRect();
					return rect.top < h && this.infi
				},
				handleScroll() {
					let fullHeigh = window.innerHeight || document.documentElement.clientHeight
					if (this.infi && this.isElementNotInViewport(this.$refs.inFi, fullHeigh)) {
						//滑动加载
						this.loadMore()
					}
				}
			},
			mounted() {
				this.handleScroll()
				window.addEventListener("scroll", this.handleScroll);
			}
		};
		let Ctor = Vue.extend(Main);
		new Ctor().$mount('#home');
	</script>
</html>

令月十一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue滑动加载

vue<html lang="zh-Hans"> <head> <title>网站</title> <link rel="stylesheet" type="text/css" href="../static/element.min.css" /> <script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
复制链接

扫一扫