实习第二周周一总结

一.调整了之前首页的瀑布流布局还有商品详情页面布局

1.瀑布流：参考的：uniapp瀑布流布局写法-阿里云开发者社区 (aliyun.com)

试过很多网上的瀑布流但是这个是目前看到最好的

2：昨晚又又又看了一遍flex布局和子绝赴相，上午又调整了一下详情页面布局主要是为了适配各种机型屏幕，最后也是实现了，然后继续完善详情页的相关推荐

二.业务需要瀑布流布局封装成组件复用

1.home页面里面开始调试总是不出效果后来，仔细理解了一下逻辑uniapp

（1）第一，组件的生命周期函数和uniapp中的页面生命周期函数不同

（2）第二，在home请求数据将请求后的数据以props参数形式传递给瀑布流布局的子组件是不可以的，这里需要使用$nextTick(),流程就是我请求得到数据之后，我再通知我的子组件拿到新的数据之后更新view

methods: {
			// 获取数据
			async getImageList() {
				const result = await uni.$http.get('/images');
				if (result.statusCode !== 200) {
					uni.showToast({
						title: "数据请求失败",
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				this.updateImageList(result.data);
			},
			updateImageList(data) {
				// 更新数据
				const listObj = [];
				data.forEach((element) => {
					const imgPath = '...' + element.hash;
					const imgObj = {
						imageSrc: imgPath
					};
					listObj.push(imgObj);
				});
				this.itemList = listObj;

				// 等待 DOM 更新后执行
                //这个时候我们是肯定拿到请求之后的数据了
				this.$nextTick(() => {
					// 通知子组件数据已经准备就绪
					// console.log(this.itemList);
					uni.$emit('data-ready', this.itemList);
				});
			}
		} //method

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

实验结果：

还有一个注意的点是：

uni.$on订阅 和 uni.$emit发布是uniapp自带的可以直接调用，但是要注意在发布页面需要移除监听事件

onUnload() {
			// 移除监听事件  
			uni.$off('data-ready');
		},