论坛网站模板免费下载,营销策划有限公司经营范围,专业网站的定义,六安人前言 移动端演示 http://8.146.211.120:8081/#/ 前面的文章我们基本完成了详情页开发 今天我们具体的去进行实现个人中心 并且分享我开发时遇到的问题
首先先看效果
我们对布局整体规划一下
个人名片 半透明背景 刚开始我用的是 view stylebackground-image: ur…前言 移动端演示 http://8.146.211.120:8081/#/ 前面的文章我们基本完成了详情页开发 今天我们具体的去进行实现个人中心 并且分享我开发时遇到的问题
首先先看效果
我们对布局整体规划一下
个人名片 半透明背景 刚开始我用的是 view stylebackground-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.scrollTop0){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.currentIndex1)]console.log(赋值了高度 当前currentIndex1 (this.currentIndex1) getNodes监听的数据 this.swiperHeight)}});},这里只有 一个问题 page组件上滑时 会整体页面上移导致页面卡顿 还会出现有两个滚动条的情况 3.依旧动态计算高度 但是我们swiperitem里面的内容是普通的view这样就不会出现重复的滚动条 onReachBottom:function(){console.log(我到第 (this.currentIndex1) 最低端了)console.log(this[apiLoadingStatus(this.currentIndex1)])if(this[apiLoadingStatus(this.currentIndex1)]){return ;}// 获取加载组件状态看一下是否还能继续加载// 保证触底只执行一次加载console.log(timer)console.log(this[loadMoreTimer(this.currentIndex1)])if(this[loadMoreTimer(this.currentIndex1)] ! null){clearTimeout(this[loadMoreTimer(this.currentIndex1)]);}this[loadMoreTimer(this.currentIndex1)] setTimeout(() {var status this.$refs[loadmorecom(this.currentIndex1)].loadMoreStatus;if(status ! 0){return null;}this.$refs[loadmorecom(this.currentIndex1)].loading();// 此处开启加载动画执行加载数据的函数this[getNotes(this.currentIndex1)]();// this.swiperHeight this[swiperHeight(this.currentIndex1)]// console.log(赋值了高度 当前currentIndex1 (this.currentIndex1) oonReachBottom监听的数据 this.swiperHeight)}, 80);},随后执行uniapp官方页面滑动底端 执行的方法 我们在这里动态计算当前的高度 数据越多高度越多 并在 导航切换时 再重新给swiper赋值即可 navchange1:function(index){this.currentIndex index;this.setSwiperHeight(this.currentIndex1);},个人中心页面开发完毕 下一篇我们讲解 im聊天列表 代码地址 https://gitee.com/ddeatrr/springboot_vue_xhs
