微信小程序scroll-view隐藏滚动条的方法详解


Posted in Javascript onMarch 25, 2020

效果图:

微信小程序scroll-view隐藏滚动条的方法详解

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示;

2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的;

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;

4.包裹 scroll-view 的元素要加上样式?> overflow:hidden;white-space:nowrap;

5.有时候为了美观要隐藏滚动条,需要在样式里加上

核心代码:

在wxss里加入以下代码

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

 scrollview属性

微信小程序scroll-view隐藏滚动条的方法详解

总结

到此这篇关于微信小程序scroll-view隐藏滚动条的方法详解的文章就介绍到这了,更多相关小程序scroll-view隐藏滚动条内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中设置元素class的三种方法小结
Aug 28 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 #Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 #Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 #Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
js实现页面图片消除效果
Mar 24 #Javascript
js实现消灭星星(web简易版)
Mar 24 #Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
python 自动提交和抓取网页
2009/07/13 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
对Python中range()函数和list的比较
2018/04/19 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
课程设计心得体会
2013/12/28 职场文书
日语系毕业求职信
2014/07/27 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
开学典礼校长致辞
2015/07/29 职场文书