从零用java实现 小红书 springboot vue uniapp （4）个人主页优化

前言

移动端演示 http://8.146.211.120:8081/#/

前面的文章我们基本完成了详情页开发
今天我们具体的去进行实现个人中心 并且分享我开发时遇到的问题

首先先看效果

我们对布局整体规划一下

个人名片
半透明背景

刚开始我用的是

		<view style="background-image: url('http://8.146.211.120:8080/upload/notes/note (6).jpg');
         background-size: cover;background-position: center;background-repeat: no-repeat;
">

设置背景图片 cover 可以完全显示出图片 然后用opacity 这个样式实现 会发现 名片的所有按钮文字都变成了半透明
跟我们理想的效果不一样
理想的效果是从下往上半透明 黑色
实现方式就是套了一层view 样式从下往上透明度依次减少

	.bg-element {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.7) 25%,
		rgba(0, 0, 0, 0.6) 50%,
		rgba(0, 0, 0, 0.5) 70%,
		rgba(0, 0, 0, 0.4) 100%);
		/* 解释：linear-gradient表示创建线性渐变，to top指定渐变方向为从下往上，
        rgba(0, 0, 0, 0.8) 0%表示在起始位置（底部）颜色为透明度0.8的黑色，
        rgba(0, 0, 0, 0) 100%表示在结束位置（顶部）颜色为完全透明的黑色，实现透明度减弱效果 */
	}

按钮
我们没有选择小红书的透灰色 实现了类似 ios毛玻璃的效果

	backdrop-filter: blur(8rpx); /* 调整blur的值来控制模糊程度，数值越大越模糊 */
	background-color: rgba(255, 255, 255, 0.1); /* 这里设置白色半透明作为基础颜色，透明度可按需调整 */

吸顶导航

当页面划到下面的时候 我们希望知道我们在那个子导航中
所以需要吸顶导航 具体实现为
1.计算页面高度
2.计算导航高度
3.当页面距顶部高度大于导航高度时 吸顶

		onPageScroll:function(e){
			// 根据滚动高度动态吸顶
			if(e.scrollTop >= this.headerHeight){
				this.isFixed = true;
			}else{
				this.isFixed = false;
			}
		},

4.还需要有一个view对原来的吸顶高度进行占位 否则会错位
切换导航
我们希望左右滑动页面的时候 自动切换导航
但是首先要给swiper设置一个高度
但是三者公用一个父级 所以 需要考虑如何设置
1.首先 我想到的是固定高度 当页面发生上滑时自动移动到 固定导航的位置

			swiperScroll(e){
				console.log(e.detail.scrollTop)
				console.log(this.headerHeight)
				if(e.detail.scrollTop>0){
					uni.pageScrollTo({
						scrollTop: this.headerHeight,
						duration: 0
					});
				}
			},

但是pageScrollTo这个方法页面会有延迟 导致很生硬 且直接滑动下面时 直接会滚动 swiper的滚动条 导致页面不下移
2.使用使用我们主页开发时的page的组件 动态赋予高度

			setSwiperHeight(i) {
				let element = "#content-wrap" + i.toString();
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						console.log('当前Swiper'+ i +'高度' + res[0].height)
						this['swiperHeight'+(i)]= res[0].height;
						this.swiperHeight = this['swiperHeight'+(this.currentIndex+1)]
						console.log('赋值了高度 当前currentIndex+1=' + (this.currentIndex+1) +' getNodes监听的数据' + this.swiperHeight)

					}
				});
			},

这里只有 一个问题 page组件上滑时 会整体页面上移导致页面卡顿 还会出现有两个滚动条的情况
3.依旧动态计算高度 但是我们swiperitem里面的内容是普通的view这样就不会出现重复的滚动条

	onReachBottom:function(){
			console.log('我到第'+ (this.currentIndex+1) +'最低端了')
			console.log(this['apiLoadingStatus'+(this.currentIndex+1)])
			if(this['apiLoadingStatus'+(this.currentIndex+1)]){
				return ;
			}
			// 获取加载组件状态看一下是否还能继续加载
			// 保证触底只执行一次加载
			console.log('timer')
			console.log(this['loadMoreTimer'+(this.currentIndex+1)])
			if(this['loadMoreTimer'+(this.currentIndex+1)] != null){clearTimeout(this['loadMoreTimer'+(this.currentIndex+1)]);}
			this['loadMoreTimer'+(this.currentIndex+1)] =  setTimeout(() => {
				var status = this.$refs['loadmorecom'+(this.currentIndex+1)].loadMoreStatus;
				if(status != 0){return null;}
				this.$refs['loadmorecom'+(this.currentIndex+1)].loading();
				// 此处开启加载动画执行加载数据的函数
				this['getNotes'+(this.currentIndex+1)]();
				// this.swiperHeight = this['swiperHeight'+(this.currentIndex+1)]
				// console.log('赋值了高度 当前currentIndex+1='+ (this.currentIndex+1) +' oonReachBottom监听的数据' + this.swiperHeight)

			}, 80);
		},

随后执行uniapp官方页面滑动底端 执行的方法 我们在这里动态计算当前的高度 数据越多高度越多
并在 导航切换时 再重新给swiper赋值即可

	navchange1:function(index){
				this.currentIndex = index;
				this.setSwiperHeight(this.currentIndex+1);
			},

个人中心页面开发完毕 下一篇我们讲解 im聊天列表

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs