微信小程序隐藏页面滚动条
开发小程序时,经常会碰到页面长度超过屏幕高度,然后下拉时会出现滚动条,对于一些有强迫症的人来说是不可忍受的。
网上看了好多,写的。都评论有起作用或者不起作用的。
我在这分享一个全局隐藏滚动条的方式。
样式代码我们在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来包裹页面内容。
微信小程序隐藏页面滚动条的更多相关文章
- 微信小程序去除页面滚动条
::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } 父级元素(滚动的元素) width:10 ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- 微信小程序-隐藏和显示自定义的导航
微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便 ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 微信小程序之页面路由
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
- 微信小程序的页面渲染(if/for)
下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...
- 微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: <!--pages/list/list.js--&g ...
随机推荐
- http请求的方法
1.OPTIONS 返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送'*'的请求来测试服务器的功能性. 2.HEAD 向服务器索要与GET请求相一致的相应,只不过响应体将不 ...
- nodejs <a>带参数返回路由标记执行数据库操作
今天在测试mongo数据库操作维护的时候,测试了一下直接在表内添加操作列来完成数据的删除操作,直接返回数据库ID,页面表格如下: 通过点击删除,即可完成对应条目数据库删除操作. 1.mongo数据操作 ...
- 一次CentOS 出现“Too many open files"错误的解决
一.原因分析 出现本问题,应该是打开文件最多数量不足,默认是1024个,在生产环境中经常出现该问题. 使用ulimit -a 查看打开文件数量限制 二.解决方案A(临时有效) 1.如果是非root用户 ...
- SAP B1如何找回被误删的许可证号
SAP B1的许可证分配记录,保存在安装目录下的B1Upf.xml文件下,如果你发现许可证用户不小心误删了, 但又不知道是哪个用户名了,打开此文件,便可发现该用户名.接下来,你只要再建立一个和误删除的 ...
- white-space: pre-line;的坑
html模版解析换行 这是字符串 跟标签设置white-space: pre-line: pre兼容ie8,pre-line不兼容ie 6-7 这行文字开头是没有空格的但是还是有很大的空格,代码方法截 ...
- json提取器通过多条件筛选提取ID
可能在某些列表中如名称会有重复,此时就需要使用多个搜索条件来判定唯一性 $.data.[?(@.tymc=="测试测试")].[?(@.plat_merchandise_id==& ...
- 《MySQL是怎样运行的》第四章小结
- 使用ipmitool配置ipmi(远程控制卡)
使用ipmitool配置ipmi(远程控制卡) 在centos安装OpenIPMI: yum install OpenIPMI OpenIPMI-tools 设置开机启动 chkconfig ipmi ...
- Android错误之--Error retrieving parent for item: No resource found that matches the given name 'Theme.A
改正错误 (虽然内容较少,但是还是选择单独占用一篇) 这个错误,可以说是困扰了我好久,然后就看到可以改变一下使用的Android版本,改成Android 4.0,然后就去试了试,发现真的就好了耶! 就 ...
- 【Keil】浅学一下keil中的.sct文件
[Keil]浅学一下keil中的.sct文件 最近重新捣鼓了acfly的源码,有了新的有趣发现,当然,过程并不有趣. 起因 clone下来我去年提交的代码,编译 ...... 报错辣! linking ...