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

前言

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

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

首先先看效果

我们对布局整体规划一下

个人名片
半透明背景

刚开始我用的是

bash 复制代码

		<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 样式从下往上透明度依次减少

bash 复制代码

	.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毛玻璃的效果

bash 复制代码

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

吸顶导航

当页面划到下面的时候我们希望知道我们在那个子导航中

所以需要吸顶导航具体实现为

1.计算页面高度

2.计算导航高度

3.当页面距顶部高度大于导航高度时吸顶

bash 复制代码

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

4.还需要有一个view对原来的吸顶高度进行占位否则会错位
切换导航

我们希望左右滑动页面的时候自动切换导航

但是首先要给swiper设置一个高度

但是三者公用一个父级所以需要考虑如何设置

1.首先我想到的是固定高度当页面发生上滑时自动移动到固定导航的位置

bash 复制代码

			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的组件动态赋予高度

bash 复制代码

			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这样就不会出现重复的滚动条

bash 复制代码

	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赋值即可

bash 复制代码

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

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

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

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

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