从零用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