前言
移动端演示 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