做网站实验体会,计算机网络工程师证书,门户网站中综合性程度高的是,网站开发流程包括1、滚动到一定区域#xff0c;顶部内容置换并置顶 功能#xff1a; 当我向下滚动时#xff0c;当关注那一行快到顶部的时候#xff0c;把左侧区域的内容切换成右侧区域的内容#xff0c;并置顶 原先我使用v-if来显示隐藏#xff0c;发现会出现闪屏的现象#xff0c;后来…1、滚动到一定区域顶部内容置换并置顶 功能 当我向下滚动时当关注那一行快到顶部的时候把左侧区域的内容切换成右侧区域的内容并置顶 原先我使用v-if来显示隐藏发现会出现闪屏的现象后来我把他改成visibility就可以了
templateview classhome_containerview :style{visibility: !ScrollTop?none:hidden}左侧内容/viewview classScrollTop :style{top:statusBarHeight,visibility: !ScrollTop?none:hidden}右侧内容/view/view
/templatescriptexport default {data() {return {listTop: 0, //底部关注推荐部分距离顶部的距离statusBarHeight: 0,ScrollTop: false, //滚动页面显示对应区域}},onReady() {this.statusBarHeight uni.getSystemInfoSync().statusBarHeight 40 px// console.log(this.statusBarHeight) //这个就是距离顶部的高度let query uni.createSelectorQuery().in(this);query.select(#bottom_word).boundingClientRect(data {this.listTop data.top - 87 - 100 //减去导航栏}).exec();},onPageScroll(e) { //监听页面滚动距离this.ScrollTop e.scrollTop this.listTop},}
/script
