小程序之scroll-view组件scroll-y失效

小程序滚动里面catchtap事件苹果手机使用无效 里面catchtap事件苹果手机使用无效 源代码如下: <scroll-view scroll-y class='scroll'> <view class='senceBox'> <block> <view class='item' data-str='一键关闭所有灯光' catchtap='runsence' bindlongpress="delAOFF" wx:if='{{!KOFF}}'> <view class='dnam 阅读详情

开始我以为是小程序scroll-view组件scroll-y失效,查了很多网上说的都没有确切的解决掉问题

下面是我写的代码

 <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation scroll-top="{{VerticalNavTop}}" style="height:calc(100vh - ({{topHeight}}px + 50px))">
          <view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{list}}" wx:key bindtap='tabSelect' data-id="{{index}}">
            科室-{{item.name}}
          </view>
</scroll-view>

刚开始查询问题的时候,网上都说是scroll-view高度设置的有问题,我这边高度是通过微信wx.getSystemInfo接口获取的手机型号页面高度布局生成的下拉框列表如下图所示 100vh是手机视图窗口的高度 也就是页面布局的 100%;

结果排查获取手机页面顶部高度的时候发现部分机型获取不到页面高度刚开始在app.js中全局获取,到局部页面调用的时候就为NAN

onLaunch: function () {
    let that = this;
    //获取手机页面高度,设置头部高度
    wx.getSystemInfo({
      success: e => {
        that.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        if (custom) {
            that.globalData.Custom = custom;  
            that.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            that.globalData.topHeight = custom.bottom + custom.top;
        } else {
            that.globalData.CustomBar = e.statusBarHeight + 40;
        }
      }
    })
  },

然后又去查询了部分机型获取不到手机页面高度的处理方法,得到如下处理方式

再局部页面js中添加渲染视图初始化时重新再进行获取手机页面高度

 onReady: function () {
    let that = this;
    wx.getSystemInfo({
        success: res => {
          let custom = wx.getMenuButtonBoundingClientRect();
          if (custom) {
              that.setData({
                topHeight:custom.bottom + custom.top - res.statusBarHeight
              })
          } else {
              that.setData({
                topHeight:custom.bottom + res.statusBarHeight + 40
              })
          }
        }
    })
  },

问题解决

小程序scroll-view 设置scroll-y=false 不管用的问题 问题: 利用scroll-view组件横向滚动实现步骤条效果,每个子元素下使用到scroll-view组件纵向滚动。 小程序开发工具上正常,在真机上滚动子元素内容时,页面会跳到第一个子页面。 正常情况下如下图: 滚动疫苗页面后内容错位,如下图: 排查,在真机上查看元素结构时,发现父元素scroll-view允许纵向滚动。 查看代码,发现设置了scroll-y=“false”,貌似并未起作用。 仔细查看文档,发现了自己的错误。 凡是布尔类型的属性,都跟 HTML5 标准是一样的,写值了就是 true 阅读详情

相关推荐

小程序页面滚动到底部,使用scroll-view scroll-into-view失效问题

场景需求:咨询问题时,每次收到新的消息或发送消息后页面自动滚动到底部 使用scroll-view组件, 设置scroll-into-view 在底部写一个容器并且设置id 在js data中定义toView并设置默认值底部容器id <scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true" wx:if='{{doctorInfo}}' class="inquiry-swiper

qq_32849999的博客 2723

scroll-view scroll-y上下滑动失效

如果我们高度是动态的,那我们可以动态给scroll-view一个高度即可。注意高度不要和相应元素高度一致,不然也是无法滚动的。在uniapp打包成小程序部署后如下代码,我们添加了 scroll-y但是无法上下滑动。滚动的条件必须是设定固定高度,这样才能滚动。

到底要什么姿态,才不会显得我在使坏。 2912

微信小程序: 解决swiper嵌套scroll-view的滚动失效问题

本文针对微信小程序开发中常见的swiper嵌套scroll-view导致滚动失效问题,深入剖析了触摸事件冲突的核心原因,并提供了从基础到进阶的三种解决方案。首先确保高度链100%贯通,其次利用swiper的enhanced属性优化兼容性,最后通过scroll-into-view技巧主动激活滚动。文章旨在帮助开发者快速定位并解决这一交互难题,实现流畅的页面滚动体验。

weixin_29232507的博客 394

uniapp scroll-y 小程序失效

滚动效果失效,大都是高度的问题 如果出现不滚动的问题,沿着scroll-view标签网上查找,看那个标签的高度溢出,只要scroll-view及父级标签高度都为屏幕高度即出现滚动。 例如:

weixin_51558009的博客 1257

避坑指南:微信小程序scroll-view动态高度计算的那些雷区

本文深入剖析了微信小程序中scroll-view组件动态高度计算的常见问题与解决方案。针对CSS Flex布局的兼容性陷阱、JS动态计算的异步时机错误以及自定义导航栏与安全区域带来的高度计算难题,提供了详细的避坑指南和实战代码,帮助开发者实现精准的scroll-view高度自适应。

zz67890的博客 1054

微信小程序开发:解决swiper-item内scroll-view滚动失效的实战技巧

本文深度解析微信小程序开发中,swiper-item内scroll-view组件滚动失效的常见问题。通过剖析高度继承断链、样式作用域等根源,提供从基础高度链设置到动态计算高度的完整实战解决方案,并分享调试技巧与性能优化建议,帮助开发者彻底解决滚动难题。

weixin_29219539的博客 350

uniapp-小程序上下滚动失效解决办法

uniapp-小程序上下滚动失效解决办法

艺术就是爆炸! 2582

微信小程序中scroll-view中不设定高度实现自动滚动

在微信小程序中scroll-view沿y轴进行滚动时需要设定固定高度,现通过样式和布局实现高度自适应不设定高度

微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)

微信小程序 - scroll-view 的一些要点(scroll-view 需要设置滚动方向、scroll-view 需要设置高度)

weixin_52173250的博客 596

细节增强卷积DEConv详解及代码复现

这种预训练模型能够捕捉图像的基本特征,为后续的端到端训练提供良好的初始参数。例如,在RESIDE和RESIDE-6K数据集上的实验结果表明,使用MSPLCK模块的MixDehazeNet-L模型在RESIDE-IN数据集上首次超过了42dB的PSNR指标,且在所有数据集上均优于先前的方法。例如,在RESIDE和RESIDE-6K数据集上的实验结果表明,使用MSPLCK模块的MixDehazeNet-L模型在RESIDE-IN数据集上首次超过了42dB的PSNR指标,且在所有数据集上均优于先前的方法。

hasakie的博客 1911

Android应用加固脱壳实战:从爱加密原理到Frida内存Dump与修复

在移动应用安全领域,代码加固与动态加载是保护核心逻辑的关键技术。其原理在于通过修改应用启动流程,将原始DEX加密隐藏,并注入包含解密逻辑的壳DEX,实现运行时动态加载。这项技术的核心价值在于防止应用被逆向分析、二次打包或恶意篡改,广泛应用于金融、游戏等高安全要求场景。对于安全研究、漏洞挖掘或历史版本审计,掌握脱壳技能至关重要。本文聚焦于**爱加密**等主流加固方案,深入探讨如何利用**Frida**框架在内存中精准捕获解密后的DEX数据,并解决脱壳后常见的签名校验等运行问题,提供一套从原理到实践的完整攻防思

weixin_28716443的博客 490

[小记] 微信小程序小方法(padding失效;scroll-view的rpx高度;input清空输入+wx:if切换+计时器...)

微信小程序 padding 失效 在使用 padding 前,添加 box-sizing 属性,值为: border-box;box-sizing: border-box; padding: 0 30rpx; scroll-view 相关 需要添加 scroll-y=‘true’ 指令才会纵向滚动; rpx 适配下,scrollHeight 高度计算: 计算屏幕高度(rpx): 【来源:https://blog.youkuaiyun.com/weixin_37928483/article/details/80.

zhaoweihao的博客 1886

从零到实战:用QCustomPlot在QT中绘制动态曲线图(含OpenGL加速配置)

本文详细介绍了如何在QT中使用QCustomPlot库绘制动态曲线图,并配置OpenGL加速以提升渲染性能。从环境搭建、动态数据可视化到OpenGL加速配置,手把手教你实现工业级动态曲线监控系统,适用于大数据量实时展示场景。

weixin_29019241的博客 351

微信小程序fixed定位后scroll-view滚动失效问题

如图微信小程序中 scroll-view组件外div加display:flxed或者是absolute后, scroll-view组件滚动失效。 解决办法: scroll-view宽度为屏幕宽度, 子元素view.cont设置overflow:auto;内容超出屏幕会出滚动条,然后便可以拖动了, 最外层header设置overflow-y: hidden;隐藏滚动条,实...

lindali1115的博客 3823

告别重启烦恼:用WSL2让Docker和VMware在Win10上真正共存

本文详细介绍了如何在Windows 10系统上,借助WSL2实现Docker与VMware的真正共存,彻底告别以往需要反复重启切换的烦恼。通过启用Hyper-V兼容模式并进行正确配置,开发者无需重启即可同时高效运行容器和虚拟机,显著提升开发与测试工作流的连续性和效率。

salt9的博客 987

Bode图、ABCD矩阵与EET结合:三步搞定复杂电路传递函数分析

在模拟电路与电源控制设计中,传递函数和频率响应是衡量系统稳定性的核心指标。Bode图以直观的幅频/相频曲线揭示带宽与相位裕度,ABCD二端口矩阵可将级联网络结构化表达,而EET额外元素定理则针对寄生电容、负载效应等局部修正提供显式公式。三者互补,组合成一套从整体拓扑到局部寄生修正的完整分析方法:先用ABCD搭建主体网络,再用EET快速加入额外元件,最后用Bode图验证传递函数和稳定裕度。该方法适用于滤波器设计、电源环路补偿、运放稳定性分析等线性小信号场景,支持Python/SciPy和SPICE交叉验证,显

weixin_32496547的博客 363

小程序scroll-view 组件的使用

小程序scroll-view 组件的使用

weixin_47938715的博客 3128

使用Simulink来模拟多旋翼无人机在风扰动条件下的飞行情况,并分析其稳定性

本教程详细介绍了使用Simulink进行多旋翼无人机风扰动稳定性分析的完整流程。首先构建包含飞行器动力学模型、控制系统和环境模拟模块的系统框架,重点讲解简化动力学方程的实现方法。随后指导设计PID控制器来维持姿态稳定,并添加随机风扰动模型模拟环境干扰。通过设置输入信号和输出显示,最终实现对不同风速条件下无人机控制性能的评估。该实例为无人机控制系统设计提供了实用的仿真方法,强调利用MATLAB工具进行可视化分析和参数优化,以提高系统抗干扰能力和稳定性。

amy_mhd的博客 421

可滚动视图scroll-view组件

微信小程序是组件进行拼装的项目scroll-view组件是视频展示和图片展示的很好容器。

qq2844509367的博客 1282

uniapp - 详解使用高德地图在地图上实现绘制边界/点聚合/行政区域高亮等功能,Uniapp高德地图点聚合标记及绘制点线面示例代码(全端兼容H5网页、小程序、安卓app、苹果app、nvue)

uni-app,h5移动端网页,微信小程序,支付宝小程序,Android安卓,苹果ios,app,nvue,高德地图,uniAPP高德地图实现点聚合,地图区域描边、点标记、点信息详情弹窗,实现绘制边界区域,uniapp H5使用高德地图实现点聚合、行政区域高亮,实现高德地图的marker聚合功能,高德地图进行marker标点,点信息展示,点击标记点弹出对话框,点击聚合点后显示信息模态框,打标点,【Uniapp】高德地图的接入自定义标点与信息窗体使用,绘制行政区域边界,绘制多边形,电子围栏,高德行政区划边界,

✅ 精选推荐文章 1万+

Android 13.0 app进程保活白名单功能实现

在13.0的系统rom产品开发中,在某些重要的app即使进入后台,产品需求要求也不想被系统杀掉进程,需要app长时间保活,就是app进程保活白名单功能的实现, 所以需要在系统杀进程的时候不杀掉白名单的进程,接下来就看怎么样来实现这些功能

安卓兼职framework和app工程师的博客 3142

scroll-view吸顶魔法解密:让元素“粘“在你想要的地方

scroll-view吸顶魔法解密:让元素"粘"在你想要的地方

m0_72030584的博客 1255

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

uniapp ios scroll-view中z-index失效的问题

uniapp ios scroll-view中z-index失效的问题

weixin_53236070的博客 1178

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

scroll-view 使用详解:常见用法、最佳实践与问题解决

本文详细介绍了小程序中 scroll-view 组件的使用方法、核心功能及常见问题解决方案。主要内容包括:1)基础用法,强调必须设置高度;2)核心属性解析,如滚动方向控制、指定滚动位置等;3)典型应用场景实现,如垂直列表、横向滚动和定位到指定元素;4)关键事件处理,包括滚动监听和加载更多功能;5)高频问题排查,如滚动失效、性能优化和下拉刷新问题;6)高级技巧如吸顶效果的实现。文章提供了丰富的代码示例和优化建议,帮助开发者高效使用该组件解决实际开发中的滚动需求。

csdn_silent的博客 1788

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

微信小程序scroll-view滑动卡顿,下滑时向上滑动失效

微信小程序scroll-view滑动卡顿滑动卡顿解决方案代码实现wxml文件js文件 滑动卡顿 微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止。小程序向下滑动惯性卡顿。 解决方案 scroll-view开启了enable-fresh。判断当前scroll位置,如果不在第一页则关闭enable-refresh,在第一也才开启。 代码实现 wxml文件 <scroll-view scroll-y="true" class="scroll" bindscroll=

weixin_45720604的博客 7281

微信小程序 scroll-view失效问题

记录嵌套在swiper-item里面的scroll-view失效问题,height设置为。在css中加入以下代码 可以隐藏滚动条。scroll-view 使用步骤。

black1java的博客 827
上一篇: vue路由history模式 部署到nginx服务器 直接访问路由/刷新 404
下一篇: 微信小程序之条形码和二维码生成
LGDmar
博客等级 码龄11年 28粉丝 48原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值