当前位置: 首页 > article >正文

uniapp scroll-view 不生效排查

排查路径:

  1. 开启 refresher-enabled 属性
  2. 使用竖向滚动时,需要给 <scroll-view> 一个固定高度,通过 css 设置 height;使用横向滚动时,需要给 <scroll-view> 添加 white-space: nowrap; 样式
  3. 父元素不要设置 css 属性:overflow: hidden
  4. 一定要使用 snake-case 格式!即:<scroll-view></scroll-view>,不要使用驼峰格式:<ScrollView></ScrollView>,巨特么坑!
<template>
    <view class="viewport">
        <!-- 注意必须是 snake-case,否则会不生效 -->
        <scroll-view class="scroll-view"  refresher-enabled scrollY>
            <!-- 轮播图 -->
            <MySwiper class="my-swiper" :customStyle="{
                width: '100vw',
                height: '300rpx'
            }" :data="swiperInfos" />
            <!-- 分类面板 -->
            <CategoryPanel :data="categoryInfos" />
        </scroll-view>
    </view>

</template>

<style lang="scss" scoped>
.viewport {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .scroll-view {
        flex: 1;
        overflow: hidden;
    }
}
</style>

http://www.kler.cn/a/442614.html

相关文章:

  • 微信小程序在使用页面栈保存页面信息时,如何避免数据丢失?
  • CMD批处理命令入门(5)——ping,ipconfig,arp,start,shutdown,taskkill
  • Spring Boot中的扫描注解如何使用
  • CSS | 实现三列布局(两边边定宽 中间自适应,自适应成比)
  • ubuntu22.4 ROS2 安装gazebo(环境变量配置)
  • Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统系列文章(四)
  • RT-Thread 的时钟管理
  • 3_使用 HTML5 Canvas API (2) --[HTML5 API 学习之旅]
  • Qt之自定义标题栏拓展(十)
  • Tree-of-Counterfactual Prompting for Zero-Shot Stance Detection
  • spring使用rabbitmq当rabbitmq集群节点挂掉 spring rabbitmq怎么保证高可用,rabbitmq网络怎么重新连接
  • 使用Python打造高效的PDF文件管理应用(合并以及分割)
  • Spring Boot 集成 Elasticsearch怎样在不启动es的情况下正常启动服务
  • 【21天学习AI底层概念】day5 机器学习的三大类型不能解决哪些问题?
  • 秒杀抢购场景下实战JVM级别锁与分布式锁
  • 四、网络层:数据平面,《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》
  • WPF 使用LibVLCSharp.WPF实现视频播放、停止、暂停功能
  • 【排序算法】——插入排序
  • .Net Core注册一个定制任务执行类服务
  • 首屏加载慢问题
  • 备战秋招:2024游戏开发入行与跳槽面试详解
  • 智能移动交通执法方案:易泊车牌识别相机助力精准执法与数据驱动管理
  • HCIA-Access V2.5_3_3_2_VLAN路由配置与实现
  • 机器学习之偏差
  • Shadcn UI 实战:打造可维护的企业级组件库
  • 简单配置,全面保护:HZERO审计服务让安全触手可及