Home  >  Article  >  Web Front-end  >  How to cancel page scroll bar in uniapp

How to cancel page scroll bar in uniapp

coldplay.xixi
coldplay.xixiOriginal
2020-12-08 13:40:2614206browse

Uniapp method to cancel the page scroll bar: 1. Set the global css style attribute in the [app.vue] page; 2. Set the default attribute in [page.json], the code is ["scrollIndicator": "none"].

How to cancel page scroll bar in uniapp

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, DELL G3 computer. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

uniapp Methods to cancel the page scroll bar:

The first method

Set the global css style attribute in the app.vue page

//第一种
scroll-view ::-webkit-scrollbar {  
    display: none !important;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}
//第二种
::-webkit-scrollbar{
  display: none;
}

The second method

Set default attributes in page.json

//第一种 这是app的不显示滚动条可以在当前页面中添加
"app-plus":{
"scrollIndicator":"none" //当前页面不显示滚动条
}
//也可以直接(不知道生效不生效,我俩种全搞上)
"scrollIndicator": "none"
//示例代码
{
"path": "pages/content/index",
"style": {
"navigationBarTitleText": "",
"app-plus":{
"scrollIndicator":"none" //当前页面不显示滚动条
},
"scrollIndicator": "none"
}
}
//第二种 直接全局搞就ok  
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我是王小白",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"scrollIndicator": "none",
"app-plus":{
"scrollIndicator":"none" //全局 在APP页面都不显示滚动条
}
}

Related free learning recommendations: Programming videos

The above is the detailed content of How to cancel page scroll bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn