• uniapp——scroll-view组件隐藏滚动条


    在用uniapp写这个pc端项目时遇到一个表格需要展示全部的数据,但是页面上只显示4条数据,刚开始用overflow-y: scroll;出现滚动条。

    因为滚动条占用位置导致表格错位,上下不对齐。scroll-view组件还是出现滚动条。

    重点来了!!!

    在样式中引用这段代码,就可以解决啦!!!

    ::-webkit-scrollbar {
    display: none;
    0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
    }

    记得在红色框也就是最外层加一个最大高度哦,超过最大高度再滚动。

    后来测试了下,在APP和小程序运行时会出现兼容性问题,

    在样式中引用以下代码解决不同平台的兼容性问题

    /* 解决小程序和app滚动条的问题 */
    /* #ifdef MP-WEIXIN || APP-PLUS */
    ::-webkit-scrollbar {
    display: none;
    0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
    }
    /* #endif */

    /* 解决H5 的问题 */
    /* #ifdef H5 */
    uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条,但依旧具备可以滚动的功能 */
    display: none;
    0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
    }
    /* #endif */

  • 相关阅读:
    C# 对XML操作-实例
    XML
    得到一个随机数组的方法
    Node Redis 小试
    Hexo快速搭建静态博客并实现远程VPS自动部署
    substr.js 字符串切割
    GraphicsMagick 学习笔记
    store.js 跨浏览器的localStorage
    bodyParser中间件的研究
    Sublime Text 使用指南
  • 原文地址:https://www.cnblogs.com/cqiong/p/14717731.html
Copyright © 2020-2023  润新知