uniapp隐藏滚动条的几种方法

最新推荐文章于 2024-06-07 09:50:54 发布
最新推荐文章于 2024-06-07 09:50:54 发布
阅读量1.6w 收藏 21
点赞数 3
分类专栏： # uniapp 文章标签： 前端 uniapp 隐藏滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43167546/article/details/112555764
版权
  1. 在pages.json里设置
//app页面不显示滚动条
"scrollIndicator": "none"
  1. 在uniapp的scroll-view组件中隐藏滚动条
::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
  1. html中隐藏滚动条(会导致页面无法滑动)
overflow-y:hidden;
  1. app-plus隐藏滚动条
"app-plus": {
    "scrollIndicator":"none"
}
前端新手W
关注
  • 3
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
轻松在uni-app中去掉编译后微信小程序的滚动条-告别无用属性&最终解决方案
m0_52952413的博客
02-02 1163
首先如果你使用的是页面级滚动，即使uni-app中的pages.json中有相关配置，在编译到小程序中也是没有效果的，因为小程序原生不支持，如下：那么在uni-app页面滚动是不是scroll-view，答案是的，但是我们没办法在顶层设置，因为官方没有暴露相关api，那么要想去掉滚动条，我们就只能在自己的页面使用scroll-view视图组件，取代全局的滚动视图。下面上简易代码效果图：如果你的组件不是占满全屏，比如有头部导航。
uniapp中如何隐藏scroll-view的滚动条
qq_44890362的博客
02-13 1万+
1.我们在使用uniapp的scroll-view组件的时候，它经常会出现滚动条，如下图所示。 2.那么我们该如何去解决呢？首先我们找到项目的App.vue文件然后在style标签里面添加如下代码，这样一来，可以根据不同平台控制不同标签的属性。 <style> /*每个页面公共css */ /* 解决小程序和app滚动条的问题 */ /* #ifdef MP-WEIXIN || APP-PLUS */ ::-webkit-scrollbar { display:.
【菜鸟记录】uniapp 滚动条隐藏
最新发布
m0_69315397的博客
06-07 213
在app.vue 里写入以下代码。
uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用！】
m0_49714202的博客
12-16 3821
uniapp之屏幕右侧出现滚动条去掉、隐藏、删除【好用！】
uni-app - 去除隐藏页面右侧垂直滚动条
qq_43193513的博客
11-24 1098
配置完毕后，需要重启编辑器并重新编译，否则无效。
uniapp scroll-view 隐藏滚动条
Lsir1998的博客
05-17 1175
如果是想全局隐藏的话，可以放在App.vue中，如果是局部则在对应的页面中引入使用即可。
uni-app去掉右侧滚动条
DZQ1223的博客
07-03 3009
注意：::-webkit-scrollbar前要有 scroll-view 的标签名或类名。注意：配置完毕后，需要重启编辑器并重新编译。只能使用于在 scroll-view 中。
uniapp 隐藏滚动条
清音的博客
05-17 1687
/deep/.uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，但依旧具备可以滚动的功能 */ display: none }
ScrollView滚动条颜色的设置方法
09-05
ScrollView滚动条颜色的设置方法，需要的朋友可以参考一下
Uniapp微信小程序滚动条跳转到元素高度
09-04
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <TC-choujiang></TC-choujiang> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-...
uni-app 第二讲首页底部导航功能实现
11-01
uni-app 第二讲首页底部导航功能实现.希望大家多多支持我：https://blog.csdn.net/k571039838k
html，小程序scroll-view去除滚动条
01-08
进入正题，有时候在项目中，需求不想要某些滚动条怎么办呢？ 首先看HTML解决滚动条的方法。 方法1.父盒子overflow:hidden 子盒子比父盒子宽17 实现视觉隐藏滚动条（为什么是17px呢，因为自己测了下，滚动条宽度就是17px） 子盒子添加内容溢出滚动条显示属性 overflow-y:scroll 并设置好宽高 可实现隐藏滚动条也可是滚轮触发滑动，使用此方法 无法监听window的滚动条事件。 代码示例： .box{ width:300px; height: 400px; overflow: hidden; }
Uniapp swiper 滚动图组件
09-10
【标题】"Uniapp swiper 滚动图组件"是一个基于Vue.js开发的全端兼容的前端组件，专为在不同平台（如iOS、Android、H5等）上实现滑动轮播效果而设计。它提供了丰富的功能和高度的自定义性，使得开发者能够轻松地在...
微信小程序 scroll-view隐藏滚动条详解
01-03
在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js  最终显示效果如下; ...
uni-app - 去除隐藏页面右侧垂直滚动条（App/全平台）
王佳斌
12-23 4579
前言 uni-app 项目中，想去除右侧滚动条很简单，只需要进行简单配置即可。 全局配置 全局配置下，除了 app 平台有差异(所以 app-plue 单独配置下)都会生效。 "globalStyle": { //全局配置 "scrollIndicator":"none", // 不显示滚动条 "app-plus":{ "scrollIndicator":"none" // 在APP平台都不显示滚动条 } } 局部配置 与全局配置一样，只不
uni-app 利用 scroll-view 和 swiper 制作 顶部导航条 （可复用）
ZkD953的博客
10-08 2万+
&lt;view class="body-view"&gt; &lt;scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft"&gt; &lt;block v-for="(menuTab,index) in menuTabs" :key="index&
uniapp之scroll-view组件的练习使用 （制作可滑动的菜单）
热门推荐
asstudio的专栏
03-17 2万+
今天仔细研究了一下uniapp的scroll-view组件使用,顺便就做了一个可滑动的菜单，点击后能够切换样式 欢迎到https://www.uniapp.club/thread-57.htm交流学习 其中，还有用到其他知识点有： 1.v-for循环数据把菜单名字循环显示出来（注意一定要加：:key=""）,不然编辑器会报错，虽然不影响使用，但是看着不舒服 1 ...
uniapp如何设置横向滚动，而且没有滚动条
小蜗牛的博客
05-15 1581
设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; 隐藏横向滚动条 ::-webkit-scrollbar { display: none; }
uniapp隐藏滚动条
09-14
在 UniApp 中隐藏滚动条，可以使用 CSS 来实现。可以通过以下两种方法来隐藏滚动条： 1. 使用内联样式： ```html <view class="scroll-container" style="overflow: hidden;"> <!-- 内容 --> </view> ``` 这里的 `scroll-container` 是一个容器元素，你可以根据实际情况修改。 2. 使用样式表： ```html <style> .scroll-container { overflow: hidden; } </style> <view class="scroll-container"> <!-- 内容 --> </view> ``` 将上述的 CSS 样式放在 `<style>` 标签中，或者在全局样式表中定义，然后在需要隐藏滚动条的容器元素中添加对应的 class 名称即可。 以上方法可以隐藏容器元素的滚动条，但用户仍然可以通过滑动手势来实现滚动。如果需要完全禁止滚动，可以使用 `disable-scroll` 属性或 `@touchmove` 事件来阻止默认行为。具体实现方式可参考 UniApp 的文档或相关教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值