【uniapp】滚动相关

1、滚动到一定区域,顶部内容置换并置顶

功能:

当我向下滚动时,当关注那一行快到顶部的时候,把左侧区域的内容切换成右侧区域的内容,并置顶

原先我使用v-if来显示隐藏,发现会出现闪屏的现象,后来我把他改成visibility就可以了

html 复制代码
<template>
	<view class="home_container">
          <view :style="{visibility: !ScrollTop?'none':'hidden'}">左侧内容</view>
          <view class="ScrollTop" :style="{'top':statusBarHeight,visibility: !ScrollTop?'none':'hidden'}">右侧内容</view>
	</view>
</template>

<script>
   export 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>
相关推荐
大叔_爱编程16 分钟前
wx206基于ssm+vue+uniapp的优购电商小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
ElasticPDF-新国产PDF编辑器13 小时前
Uni-app PDF Annotation plugin library online API examples
pdf·uni-app
Kx…………20 小时前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
getyefang2 天前
uniapp如何接入星火大模型
ai·uni-app
@PHARAOH2 天前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_12 天前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙2 天前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
goto_w2 天前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
小宝小白2 天前
【vue3】黑马小兔鲜儿项目uniapp navigationStyle
uni-app
Json____3 天前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
uni-app·电脑·蓝牙·蓝牙信标 beacon·定位信标·停车场定位