uniapp下拉刷新，锚点等功能实现

﹏ヽ暗。殇╰゛Y 2021-07-25 20:18 602阅读 0赞

uniapp下拉刷新，锚点等功能实现

<template>
    	
    	
    	
    	
    	
    	<scroll-view
    		v-if="data"
    		@scroll="onScroll"
    		:style="{ height: wh + 'px' }"
    		:scroll-y="true"
    		@scrolltolower="onReachBottom1()"
    		:scroll-top="curST"
    		:scroll-with-animation="true"
    	>
    		<uni-list>
    			<uni-list-item v-for="(item, index) in data.data" :key="index">
    				<image
    					style="width: 240rpx; height: 240rpx; min-width: 240rpx;"
    					slot="header"
    					:src="'http://101.96.128.94:9999/' + item.pic"
    					mode=""
    				></image>
    				<view class="content" slot="body">
    					<text class="title">{ {  item.title }}</text>
    					<text class="price">¥{ {  item.price }}</text>
    				</view>
    			</uni-list-item>
    		</uni-list>
    
    		<uni-load-more :status="more"></uni-load-more>
    		
    		
    		
    		<uni-transition
    			class="goTop iconfont icon-icon-test"
    			:show="showGoTop"
    			:modeClass="['fade', 'zoom-in']"
    			@click="goTop"
    		></uni-transition>
    	</scroll-view>
    </template>
    
    <script>
    export default { 
    	data() { 
    		return { 
    			// 读取系统的窗口高度
    			wh: uni.getSystemInfoSync().windowHeight,
    			more: 'more',
    			// 只有放在 data 中的数据, 才能全局使用.
    			data: null, // 对象类型的默认值 是null
    			showGoTop: false, //决定是否显示 回到最上方按钮
    			curST: 0 //当前滚动条位置
    		};
    	},
    	// vue规范要求: 函数写在 methods 中
    	// 在生命周期里, 触发 methods 中的方法
    	onLoad() { 
    		// onLoad 是页面的生命周期, 页面加载时触发. 比 mounted 早
    		this.getData();
    	},
    	onPullDownRefresh() { 
    		// 下拉刷新 触发
    		// 需要 在 pages.json 中, 配置当前页面的 下拉刷新为 真
    		uni.request({ 
    			url: 'http://101.96.128.94:9999/data/product/list.php',
    			method: 'GET',
    			data: {  pno: 1 },
    			success: res => { 
    				console.log(res);
    
    				this.data = res.data; //新数据 覆盖 旧数据
    
    				// 必须 在 pages.json 中 开启页面的 下拉刷新功能
    				uni.stopPullDownRefresh();
    			},
    			fail: () => { },
    			complete: () => { }
    		});
    	},
    	methods: { 
    		goTop() { 
    			// 直接隐藏 返回按钮: 否则 和动画滚动 结合在一起 会闪烁.
    			this.showGoTop = false;
    
    			// vue的设计: 一个值绑定在页面上, 如果值没有发生修改 就不会刷新对应的页面
    
    			// DOM更新操作 不是一行一行代码更新, 会把一个方法 作为一个整体看待
    			this.curST = 1;
    			// this.curST = 0;
    
    			// nextTick: 一个变更操作 抽离到 当前方法外部执行
    			// 代表 下一个 刷新周期
    			this.$nextTick(function() { 
    				// nextTick: 把当前函数, 添加到 下一个刷新周期执行
    				this.curST = 0;
    			});
    
    			// 效果: 先变为1, 完成后 会自动触发 nextTick中的函数
    		},
    		// 之前的 onReachBottom: 和 methods 同级别, 属于事件, 由 view 组件 触底时触发
    		// 现在 onReachBottom1 属于自定义方法, 只是名字恰巧一样. 用来绑定到 scroll-view 的触底事件
    		// 注意: 前往不要和官方同名, 会冲突
    		onReachBottom1() { 
    			//触底监听:
    
    			// 如果已经是最后一页, 则不再执行下方代码
    			const {  pno, pageCount } = this.data;
    			if (pno == pageCount) return; //return 可以终止函数执行
    
    			// 先修改 底部状态: 加载中...
    			this.more = 'loading';
    
    			uni.request({ 
    				url: 'http://101.96.128.94:9999/data/product/list.php',
    				method: 'GET',
    				data: {  pno: this.data.pno + 1 },
    				success: res => { 
    					console.log(res);
    
    					// 合并数据 并且 保持其他值 是最新的
    					res.data.data = this.data.data.concat(res.data.data);
    					this.data = res.data;
    
    					// 快速解包: 语法糖--固定的一种写法, 用来简化代码
    					const {  pno, pageCount } = res.data;
    					// 相当于: const pno = res.data.pno; const pageCount = res.data.pageCount
    
    					this.more = pno == pageCount ? 'noMore' : 'more';
    				},
    				fail: () => { },
    				complete: () => { }
    			});
    		},
    		// 绑定 在 scrollView 的 scroll 事件, 可以监听页面滚动操作
    		onScroll(event) { 
    			// console.log(event.detail);
    
    			const scrollTop = event.detail.scrollTop;
    			console.log(scrollTop);
    			// 极限值 规定 500, 超出500就显示, 不超出500 就隐藏
    			this.showGoTop = scrollTop >= 500;
    			this.curST=scrollTop
    		},
    
    		getData() { 
    			uni.request({ 
    				url: 'http://101.96.128.94:9999/data/product/list.php',
    				method: 'GET',
    				data: {  pno: 1 },
    				success: res => { 
    					console.log(res);
    					this.data = res.data;
    				},
    				fail: () => { },
    				complete: () => { }
    			});
    		}
    	}
    };
    </script>
    
    <style lang="scss">
    @import url('https://at.alicdn.com/t/font_2470361_wghghp105zs.css');
    
    .goTop { 
    	font-size: 100rpx;
    	position: fixed;
    	right: 10px;
    	bottom: 40px;
    	color: blue;
    }
    
    /* uni-app 要求使用 flex 弹性盒子进行布局: 因为此样式兼容 手机端App */
    .content { 
    	display: flex;
    	flex-direction: column;
    	justify-content: space-around;
    	font-size: 30rpx;
    
    	// 手机端App 只支持 class 选择器
    	.title { 
    		// 两行, 省略符号
    		text-overflow: -o-ellipsis-lastline;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
    		-webkit-line-clamp: 2;
    		line-clamp: 2;
    		-webkit-box-orient: vertical;
    	}
    
    	.price { 
    		color: red;
    		font-size: 1.2em;
    	}
    }
    </style>