小程序
小游戏
企业微信
微信支付
扫描小程序码分享
在滑动事件中，监听滑动距离，如果距离大于0，那么istop=false，若是滑动距离为0，那么istop=true
通过这个变量控制元素顶部导航栏的隐藏显示，结果快速滑动后 事件监听就不灵敏了，出现本该隐藏的元素在页面出现
如何解决，看了很多帖子都有这个现象，2022了还没解决吗官方
8 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
+1， 安卓手机监听不灵敏
只安卓有这个问题,ios是没问题的
快2024了还不肯解决吗
蹲 同样的问题
蹲，同样的问题，快速滑动的时候bindscroll方法就没有调用，导致固定在顶部的导航栏tab消失不了，望尽快解决
<template>
<view class="inde">
<scroll-view class="list_wrapper" @scroll="scrollEvent" scroll-y="true">
<view class="top_fixed" :style="{height:navHeight+'rpx',backgroundColor:istoggle?`#ffffff`:``,opacity:opacity}">
<view class="top_fixed_wrapper" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
<view class="nav_fixed"
:style="{width:navFixedWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx'}">
<view :class="[istoggle?`nav_fixed_title_toggole`:`nav_fixed_item_title`]">
<text style="margin-left:8rpx ;">果实坊</text>
</view>
<view class="nav_fixed_item_search" @click="turntosearch">
<view :class="[istoggle?`nav_fixed_input_toggole`:`nav_fixed_item_input`]">
<text class="iconfont " style="font-size: 35rpx;margin-left: 10rpx;"></text>
<text style="font-size: 25rpx;margin-left: 5rpx; ">{{searchtitle}}</text>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
istoggle:false
}
},
methods: {
scrollEvent(e) {
console.log(e)
var e=e.detail
if (e.scrollTop <= 30) {
this.istoggle = false
this.opacity = 0
if (e.scrollTop > 30 && e.scrollTop <= 32) {
this.istoggle = true
this.opacity = 0.3
if (e.scrollTop > 32 && e.scrollTop <= 34) {
this.opacity = 0.4
if (e.scrollTop > 34 && e.scrollTop <= 36) {
this.opacity = 0.5
if (e.scrollTop > 36 && e.scrollTop <= 38) {
this.opacity = 0.6
if (e.scrollTop > 38 && e.scrollTop <= 40) {
this.opacity = 0.7
if (e.scrollTop > 40 && e.scrollTop <= 42) {
this.opacity = 0.8
if (e.scrollTop > 46) {
this.opacity = 1
</script>
<style>
.index{
width: 100%;
height: 100%;
.list_wrapper{
height: 100vh;
/* 固定导航栏整体部分（包括状态栏+导航栏） */
.top_fixed {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
z-index: 10;
/* 导航栏部分（导航栏外层） */
.top_fixed_wrapper {
position: absolute;
display: flex;
/* justify-content: center; */
align-items: center;
/* 导航栏部分（导航栏内层：平齐胶囊部分） */
.nav_fixed {
top: 202rpx;
flex-direction: row;
justify-content: space-around;
/* 标题 */
.nav_fixed_item_title {
width: 30%;
color: yellow;
font-size: 40rpx;
font-weight: bold;
/* 假搜索框外层 */
.nav_fixed_item_search {
width: 75%;
margin-right: 10rpx;
margin-left: 5rpx;
/* 假搜索框 */
.nav_fixed_item_input {
background-color: yellow;
border-radius: 50rpx;
color: #858992;
/* 标题下拉fixed样式 */
.nav_fixed_title_toggole {
color: seagreen;
/* 假搜索框下拉fixed样式 */
.nav_fixed_input_toggole {
background-color: #ffffff;
border: 4rpx solid seagreen;
</style>
代码贴出来看看
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
+1， 安卓手机监听不灵敏
只安卓有这个问题,ios是没问题的
快2024了还不肯解决吗
蹲 同样的问题
蹲，同样的问题，快速滑动的时候bindscroll方法就没有调用，导致固定在顶部的导航栏tab消失不了，望尽快解决
<template>
<view class="inde">
<scroll-view class="list_wrapper" @scroll="scrollEvent" scroll-y="true">
<view class="top_fixed" :style="{height:navHeight+'rpx',backgroundColor:istoggle?`#ffffff`:``,opacity:opacity}">
<view class="top_fixed_wrapper" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
<view class="nav_fixed"
:style="{width:navFixedWidth,lineHeight:customHeight + 'rpx',paddingLeft:textPaddingLeft*scaleFactor+'rpx'}">
<view :class="[istoggle?`nav_fixed_title_toggole`:`nav_fixed_item_title`]">
<text style="margin-left:8rpx ;">果实坊</text>
</view>
<view class="nav_fixed_item_search" @click="turntosearch">
<view :class="[istoggle?`nav_fixed_input_toggole`:`nav_fixed_item_input`]">
<text class="iconfont " style="font-size: 35rpx;margin-left: 10rpx;"></text>
<text style="font-size: 25rpx;margin-left: 5rpx; ">{{searchtitle}}</text>
</view>
</view>
</view>
</view>
</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
<view style="background-color: red;width: 100%;height: 200rpx">sssssssssssssss</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
istoggle:false
}
},
methods: {
scrollEvent(e) {
console.log(e)
var e=e.detail
if (e.scrollTop <= 30) {
this.istoggle = false
this.opacity = 0
}
if (e.scrollTop > 30 && e.scrollTop <= 32) {
this.istoggle = true
this.opacity = 0.3
}
if (e.scrollTop > 32 && e.scrollTop <= 34) {
this.istoggle = true
this.opacity = 0.4
}
if (e.scrollTop > 34 && e.scrollTop <= 36) {
this.istoggle = true
this.opacity = 0.5
}
if (e.scrollTop > 36 && e.scrollTop <= 38) {
this.istoggle = true
this.opacity = 0.6
}
if (e.scrollTop > 38 && e.scrollTop <= 40) {
this.istoggle = true
this.opacity = 0.7
}
if (e.scrollTop > 40 && e.scrollTop <= 42) {
this.istoggle = true
this.opacity = 0.8
}
if (e.scrollTop > 46) {
this.istoggle = true
this.opacity = 1
}
},
}
}
</script>
<style>
.index{
width: 100%;
height: 100%;
}
.list_wrapper{
width: 100%;
height: 100vh;
}
/* 固定导航栏整体部分（包括状态栏+导航栏） */
.top_fixed {
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
/* 导航栏部分（导航栏外层） */
.top_fixed_wrapper {
box-sizing: border-box;
width: 100%;
position: absolute;
left: 0;
display: flex;
/* justify-content: center; */
align-items: center;
}
/* 导航栏部分（导航栏内层：平齐胶囊部分） */
.nav_fixed {
box-sizing: border-box;
width: 100%;
top: 202rpx;
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
/* 标题 */
.nav_fixed_item_title {
width: 30%;
height: 100%;
color: yellow;
font-size: 40rpx;
font-weight: bold;
}
/* 假搜索框外层 */
.nav_fixed_item_search {
width: 75%;
height: 100%;
margin-right: 10rpx;
margin-left: 5rpx;
font-size: 40rpx;
font-weight: bold;
}
/* 假搜索框 */
.nav_fixed_item_input {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: yellow;
border-radius: 50rpx;
color: #858992;
display: flex;
flex-direction: row;
align-items: center;
}
/* 标题下拉fixed样式 */
.nav_fixed_title_toggole {
width: 30%;
height: 100%;
color: seagreen;
font-size: 40rpx;
font-weight: bold;
}
/* 假搜索框下拉fixed样式 */
.nav_fixed_input_toggole {
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 50rpx;
color: #858992;
display: flex;
flex-direction: row;
align-items: center;
border: 4rpx solid seagreen;
}
</style>
代码贴出来看看