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

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

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

样式代码我们在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来包裹页面内容。

微信小程序隐藏页面滚动条的更多相关文章

  1. 微信小程序去除页面滚动条

    ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } 父级元素(滚动的元素) width:10 ...

  2. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  3. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  4. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  5. 图解微信小程序---实现页面的跳转与返回操作

    图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...

  6. 微信小程序-隐藏和显示自定义的导航

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便 ...

  7. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  8. 微信小程序之页面路由

    路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面   onLoad, onSHow 打开新页面 调用 API w ...

  9. 微信小程序的页面渲染(if/for)

    下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...

  10. 微信小程序之页面传值(路由、页面栈、globalData、缓存)

    1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: <!--pages/list/list.js--&g ...

随机推荐

  1. ES2015常用知识点

    ES2015(又称ES6)部分1 let/const以及块作用域:2 循环语句 const arr=[1,2,3]; for(const item of arr){ console.log(item) ...

  2. requests使用socks代理

    requests在2.10.0版本开始支持socks代理 自己搭了个服务器所以就想顺便用一下. import requests url = 'xxx' my_proxies={"http&q ...

  3. Linux配置NTP时间同步

    1.检查系统是否安装了NTP包(linux系统一般自带NTP4.2)没有安装我们直接使用yum命令在线安装:yum install ntp2.NTP服务端配置文件编辑vim /etc/ntp.conf ...

  4. CatDCGAN项目复现与对抗网络初识

    CatDCGAN项目复现与对抗网络初识 作者 CarpVexing 日期 100521 禁止转载 目录 CatDCGAN项目复现与对抗网络初识 引言 CatDCGAN项目基本信息 复现项目的准备工作 ...

  5. 对深度学习中全连接层、卷积层、感受野、1×1卷积、池化层、softmax层、全局平均池化的一些理解

    1.全连接层 在卷积神经网络中,在多个卷积层和池化层后,连接着1个或1个以上的全连接层,全连接层把卷积层和池化层提取出来的所有局部特征重新通过权值矩阵组装成一个完整的图,因为用到了所有的局部特征,所以 ...

  6. Docker 容器的备份和迁移

    Docker的Save和Export的区别 Docker的镜像和容器有两种方式导出 Docker Save镜像方法,会保存该镜像的所有历史记录,包括数据 1.创建快照 使用 docker commit ...

  7. 【前端工程化】使用Nexus 搭建前端 npm 私服

    参考文献1 - https://blog.51cto.com/lookingdream/3609619 参考文献2 - https://blog.csdn.net/u013278374/article ...

  8. celery介绍安装以及基本使用步骤

    目录 一.关于celery 二.celery架构的构成 1 任务中间件 Broker, 2 任务执行单元 worker 3 结果存储 backend 三.celery的应用场景 1. 异步执行:解决耗 ...

  9. mysql生成随机日期

    生成一天内随机时间 select sec_to_time(rand() * 86400); 生成一天内随机时间,floor取整秒 select sec_to_time(floor(rand() * 8 ...

  10. [极客大挑战 2019]PHP 1

    进入后提示我们网页有备份文件,这边使用爆破工具,网页会down掉 随便随便猜了一下www.zip,成功下载源码 常见的网页备份有 .git ~ .swp .swo .bak .zip 还不知道是什么题 ...