微信小程序隐藏页面滚动条

这篇具有很好参考价值的文章主要介绍了微信小程序隐藏页面滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的。

网上看了好多,写的。都评论有起作用或者不起作用的。

我在这分享一个全局隐藏滚动条的方式。

样式代码我们在app.wxss中,写一个类选择器:

 

.contain {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  background-color: #F2F5FF;
  overflow-y: scroll;
}

/* 不显示滚动条 */
.contain::-webkit-scrollbar {
  display: none;
}

  

然后我们只要在每个页面的最外围,加一个class为contain的view包裹页面内容就行了,

备注:原本我使用page标签选择器来全局定义页面初始样式的。但是发现隐藏不起效果。还是需要在最外围用一个view来包裹页面内容。文章来源地址https://www.toymoban.com/news/detail-419434.html

到了这里,关于微信小程序隐藏页面滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决微信小程序页面滚动穿透问题

    先来描述一下具体什么是滚动穿透行为,假设现在有一个长列表,可以上下滚动查看更多内容,假如我们点击一个删除按钮,会弹出一个确认弹框,这时我们如果上下滑动页面的话会发现弹框底下的列表内容依然可以上下滚动,如下所示: Video_2022-12-02_111109 这样的体验效果并

    2024年02月13日
    浏览(64)
  • 【微信小程序点击滚动页面到指定位置】

    scroll-view :https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 补充: 1: scroll-view设置高度:style=“height:100%” 2: scroll-view设置纵向滚动:scroll-y=“true” 3: scroll-view设置要去的id( 这个必须动态设置才生效 ):scroll-into-view=“{{toView}}”

    2024年02月09日
    浏览(38)
  • 微信小程序开发---小程序的页面配置

    目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 在每个小程序中,每个页面都有自己的.json配置文件,用来对当前页面的窗口外观,页面效果进行配置。 小程序中,app.json中的windows节点,可以全局配置小程序中每个页面的窗口表

    2024年02月09日
    浏览(48)
  • 关于uniapp微信小程序scroll-view组件使用show-scrollbar隐藏不了滚动条

    这里关于使用  scroll-view组件  时候有滚动条 想要隐藏滚动条但是使用show-scrollbar没有效果 这时候又使用类名隐藏滚动条 使用id隐藏滚动条都不行 解决方法:在使用  scroll-view组件 的页面或者app 页面加上以下代码就可以了         

    2024年02月12日
    浏览(51)
  • 微信小程序自定义顶部导航,滚动页面顶部导航颜色渐变

    微信小程序自定义顶部导航栏,使背景图置顶;当向上滚动页面时,实现顶部导航颜色渐变 实现方法 代码如下(示例): 提示:由于不同的手机机型顶部导航高度不一样,所有要获取手机的信息 总共三步: 1、初始化获取顶部导航信息 2、顶部导航文字上方通过view占位,同

    2024年02月11日
    浏览(55)
  • 微信小程序弹出层弹出后禁止页面滚动

    1.用一个view标签把页面禁止滚动部分包裹,并添加自定义类名 初始值为空 2. 在弹出层打开是,改变变量的值 3.给isNoRoll设置样式

    2024年02月08日
    浏览(90)
  • 微信小程序 - 完美去除 <scroll-view> 滚动条,保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条(解决 ios 苹果真机scroll-view无法隐藏滚动条)详细示例代码,保证可用

    关于微信小程序去掉 scroll-view 滚动条的教程中,全都是只能去掉安卓系统手机滚动条,而苹果手机则无法去掉。 本文 实现了在微信小程序中,强力去除 scroll-view 组件滚动条,保证去除苹果ios系统和安卓手机的滚动条, 您可以自由的将本文的去除代码应用到 “局部 / 全局”

    2024年02月11日
    浏览(69)
  • 微信小程序开发教学系列(9)- 小程序页面优化

    在开发小程序时,页面性能优化是非常重要的一项任务。优化页面性能可以提升用户体验,使小程序更加流畅和高效。本章将介绍一些常见的页面优化方法和技巧,帮助您提升小程序的性能。 页面性能优化的目标是减少页面加载时间和提升页面渲染速度,从而提供更好的用户

    2024年02月11日
    浏览(49)
  • 微信小程序过审:已经加了开关,隐藏的页面依然被检查出来?

    因为微信为了自身平台规避法律风险,开发的很多功能需要提供相关的证件或者资质,但是相关的资质办理难度大,或者一般的公司根本办不下来。个人开发者限制就更大了,只能上架一下小工具类的小程序。那么绕过审核就是一个很重要的上线技巧。 以下是本人尝试过的方

    2024年04月09日
    浏览(76)
  • Echarts微信小程序中条形图上下滑动引起页面滚动问题

    先看条形图 如图所示是,echarts中典型的横向柱状图(条形图) 需求:可以让图形进行放大缩小,并且放大后可上下滚动查看; 主要问题:放大图表之后,手指上下滑动会引起页面整体滚动,影响数据查看体验 PS:看了很多方案,有 直接修改源码 阻止touchstart、touchmove、to

    2024年04月17日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包