【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>
相关推荐
七七小报8 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
七七小报10 小时前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand10 小时前
uniapp 仿小红书轮播图效果
uni-app
性野喜悲12 小时前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜14 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app
盛夏绽放14 小时前
uni-app云开发总结
uni-app·云开发
halo141615 小时前
uni-app 小程序中的定位问题 以及 页面安全距离
小程序·uni-app
资深前端之路15 小时前
iphonex uniapp textarea标签兼容性处理过程梳理
uni-app
xx24061 天前
UniApp学习笔记
uni-app
七七小报1 天前
uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
uni-app