一个月学通Python(十二)：Python发送电子邮件及图像办公文档处理

概述

大概介绍一下我用到的内容

以下是遇到的问题

配置方式：

请求结果：

首次渲染时需要计算右侧列表元素的高度（包括类别的高度），uniapp提供了操作dom的方法

页面结构：

//这样的方式存在一些问题，加载的列表不能为空，而且首次加载的数据可能会庞大。后面改造成单次只加载一个门类，做分页上拉加载
//uniapp提供了操作dom的api（微信小程序/H5均支持）
this.$nextTick(()=>{
				this.query = uni.createSelectorQuery().in(this);
				this.query.select('.scroll-con .cata-name').boundingClientRect();
				this.query.select('.scroll-con .item').boundingClientRect().exec((data)=>{
					this.headHeihgt=data[0].height;
					this.contentHeight=data[1].height;
					this.listcata.forEach((item,index)=>{
						if(index==0){
							this.areaList.push({
								startY:0,
								endY:this.headHeihgt+this.contentHeight*item.list.length
							})
						}else{
						//这里计算每个滚动区间，与左侧联动
							this.areaList.push({
								startY:this.areaList[index-1].endY,
								endY:this.areaList[index-1].endY+this.headHeihgt+this.contentHeight*item.list.length
							})
						}
						this.areaList.push();
						this.orderList.push(item.list.length);
					})
				});
				
				})

//这段代码用于计算每个元素的位置，错位布局的重点感觉在于数据的筛选，否则没有足够的内容填充容器
gridLayout(){
				this.gridInfo=[];
				let  flag=true;
				//可以调整左右的高度，当前数据会表现成一个回字结构
				let arr=[3,4];
				for(let i=0;i<this.prefGoods.length;i++){
					if(flag){
						this.gridInfo.push({
							startRow:this.gridInfo[i-2]?this.gridInfo[i-2].endRow:1,
							endRow:this.gridInfo[i-2]?this.gridInfo[i-2].endRow+arr[0]:4,
							offset:arr[0],
							className:arr[0]>arr[1]?'largeSty':'normalSty'
						})
					}else{
						this.gridInfo.push({
							startRow:this.gridInfo[i-2]?this.gridInfo[i-2].endRow:1,
							endRow:this.gridInfo[i-2]?this.gridInfo[i-2].endRow+arr[1]:5,
							offSet:arr[1],
							className:arr[1]>arr[0]?'largeSty':'normalSty'
						})
					
					}
					if((i+1)%2==0){
						//反转数组，切换左右的高度变化
						arr.reverse();
					}
						
						flag=!flag;
				}

效果：