代码编织梦想

代码非常简单

只是为了自己用,代码贴出来供大家参考

在这里插入图片描述

<template>
	<view class="window" @scroll="scroll" ref="window">
		<view class="scroll" ref="scroll">
			<slot :data="data"></slot>
			<view class="loading" v-show="loading">
				加载中...
			</view>
			<view class="noMore" v-show="isFinish">
				没有更多了
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myScroll",
		data() {
			return {
				scrollTop: 0
			};
		},
		props: {
			isFinish: {
				default: false
			},
			loading: {
				default: false
			},
			data: {
				type: Object,
				description: '和myTab组件组合使用,接收每个tab的list'
			}
		},
		watch: {
			loading: {
				handler(newVal) {
					if (newVal === false) {
						this.notFull()
					}
				}
			}
		},
		methods: {
			scroll(e) {
				this.scrollTop = this.$refs.window.$el.scrollTop
				// console.log('scroll', this.$refs.scroll.$el.scrollHeight - this.$refs.window.$el.scrollTop)
				if (this.$refs.scroll.$el.scrollHeight - this.$refs.window.$el.scrollTop <= this.$refs.window
					.$el.clientHeight + 10) {
					// console.log('到底了')
					this.onload()
				}
			},
			// 只要底边在窗口内 就触发load
			onload() {
				// console.log('onload')
				if (this.isFinish === false) {
					this.$emit('load', this.data)
				}

			},
			// 滚动块高度小于窗口高度时会一直调用onload
			notFull() {
				console.log('notFull', this.$refs.window.$el.clientHeight, this.$refs.scroll.$el.scrollHeight)
				if (this.$refs.scroll.$el.scrollHeight < this.$refs.window.$el.clientHeight) {
					// console.log(this.$refs.window.$el.clientHeight, this.$refs.scroll.$el.scrollHeight)
					this.onload()
				}
			}
		},
		mounted() {
			console.log('myScroll mounted')
			this.notFull()

		},
		created() {
			console.log('myScroll created')
		},
		updated() {
			console.log('myScroll updated')
		},
		activated() {
			console.log('myScroll activated')
			this.$refs.window.$el.scrollTop = this.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	.window {
		position: relative;
		height: 100vh;
		overflow-y: scroll;
	}

	.scroll {
		width: 100%;

		.loading {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 60rpx;
			font-size: 24rpx;
			color: #AEAEAE;
		}

		.noMore {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 60rpx;
			font-size: 24rpx;
			color: #AEAEAE;
		}
	}
</style>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/boombutton/article/details/127992758

uni-app实现懒加载-爱代码爱编程

uni-app实现懒加载 在uni-app中,当我们需要让请求的数据进行懒加载时,可以使用onReachBottom()这个生命周期函数,让页面滚到到最底部时,进行加载操作。 这里的p是页码参数,每加载一次,per+1. onLoad() { // ajax请求 this.ajaxCode(this.per) }, onReachBottom:

uni-app 滚动到顶部/指定位置-爱代码爱编程

uni.createSelectorQuery().select('.' + class).boundingClientRect(data=>{//目标节点   uni.createSelectorQuery().select('.' + class).boundingClientRect((res)=>{//最外层盒子节点          

uni-app 在小程序平台支持 vue 3.0 框架-爱代码爱编程

简介 随着 vue3 的发布,uni-app 也逐步支持 vue3。 目前小程序平台已支持,h5、App 平台暂不支持。 除支持 vue3 语法特性外,uni-app 特有的生命周期钩子支持 Composition API,如 onLaunch,onShow,onLoad… 下面介绍创建支持 vue3 的 uni-app 项目的流程,以及使用中的一

uni-app 上拉加载 使用uni-ui 的 LoadMore 组件-爱代码爱编程

实现列表下拉加载 上拉刷新 上拉加载下拉刷新使用onPullDownRefresh遇到的问题 上拉加载 我在代码里是配合list使用的LoadMore 组件实现下拉加载,贴一个官网组件地址 LoadMore 下拉加载的原理大概是: 设置好每页展示多少条数据,加载第一页。 加载完后判断当前状态,如果数据列表的长度=全部数据长度,则将状态

uni-app使用全局组件及相关问题-爱代码爱编程

HBuilderX:2.9.8 Vue全局组件使用: 1. main.js import Vue from 'vue' import App from './App' import store from '@/store/index' import GlobalComponent from '@/components/global' V

vue整合uniapp_uni-app Vue 组件-爱代码爱编程

Vue 组件 组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升。 uni-app搭建了组件的插件市场,可大幅提升开发者的效率。https://ext.dcloud.net.cn/ 在项目的/component目录下存放组件,在要显示组件的页面中则分为3步:导入、注册和使用。

【uni-app】vue长列表性能优化-爱代码爱编程

前言,本人业余开发者而已。对于vue懂得比较基础。 经历:我在加载一个长列表。每次加载50条数据。基本上无限次数加载。可以在移动端感觉出明显的卡顿 下面是我的优化 图片必须懒加载,是否懒加载蛮明显的。 图片懒加载也要优化好。例如onPageScroll事件中就可以使用函数节流手段。【0.2秒只触发一次】 我尽量采用css的background-ba

uni-app+vue3+typescript工程搭建-爱代码爱编程

前言 通过vue-cli创建的项目,更易维护,可以使用非HbuilderX编辑器进行编码,通过终端直接执行编译命令 HbuilderX没有Linux版本(不含wine),但有大神移植了linux版本下的微信开发工具: cytle/wechat_web_devtoolsdragonation/wechat-devtools因此linux环境下也可以开发

uni-app组件生命周期-爱代码爱编程

其实学过vue和小程序的人再来看uni-app真的会非常简单 其实他就是两种语法的融合 uni-app新增了整个应用程序的生命周期 延用了小程序组件和单页面都有自己不同的生命周期的做法 但有延用了 vue 单个vue文件即为一个组件 也可以是单独页面的特性 页面生命周期更像是小程序的生命周期写法 而组件的生命周期则更像vue2的生命周期函数 小看单页面生命

uni-app伴生ui组件库uni-ui基础引入使用方法-爱代码爱编程

可能很多人会用uni-app时还在想用vue的伴生ui element ui 但其实我觉得element ui 在PC端虽然效果不错 但在跨端 的开发中甚至不然用vant ui 那么我们今天要介绍的是uni-app官方提供的ui组件库uni-ui 首先我们访问网址 https://ext.dcloud.net.cn/search?q= 然后在插件市场的