1. uniapp 取消滚动条

1.1. 方法说明

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

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

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

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

{
  "scrollIndicator": "none"
}

1.2. 方案

1.2.1. pages.json里设置

在这里插入图片描述

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

1.2.2. App.vue中设置

在这里插入图片描述

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

更多推荐