uniapp 取消滚动条

雪芽蓝域zzs2026-02-02 10:54

1. uniapp 取消滚动条

1.1. 方法说明

在uniapp中去掉页面滚动条，可以通过在App.vue中设置全局CSS样式属性、在page.json设置默认属性、使用插件等多种方法实现。

1.1.1. 通过在App.vue中设置全局CSS样式属性

javascript 复制代码

scroll-view::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

1.1.2. 在page.json设置默认属性

javascript 复制代码

{
  "scrollIndicator": "none"
}

1.2. 方案

1.2.1. pages.json里设置

javascript 复制代码

 {
      "path": "pages/main/home/home",
      "style": {
        "app-plus": {
          "titleNView": false,
          "scrollIndicator": "none"
        },
        "navigationStyle": "custom",
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    },

1.2.2. App.vue中设置

javascript 复制代码

::-webkit-scrollbar {
  /* ::-webkit-scrollbar webkit的伪元素，滚动条
      伪元素只能有一个，不能多个同时出现，且只能放在最后面
      两个冒号是css3的样式，主要与伪类区分。
  */
  width: 0;
  height: 0;
  background-color: transparent;
}