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

转载 2018年04月17日 16:32:28
一:scroll-view隐藏滚动条

在书写网页的时候,往往会为了页面的美观,而选择去掉滚动区域默认的滚动条,而在这里,就是为小程序去掉滚动条的其中的一种方法:

scroll-view.wxml:

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

scroll-view.wxss

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

scroll-view.js

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

最终显示效果如下;

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

注意:

(1)不能在scroll-view中使用textarea,mao,canvas,video组件

(2)scroll-init-view的优先级高于scroll-top

(3)onPullDownRefresh事件,无法在scroll-view中触发

(4)若想使用下拉刷新,一定要使用页面的滚动,而不是scroll-view,这样也能通过点击顶部状态栏回到页面顶部

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

微信小程序项目实战

-
  • 1970年01月01日 08:00

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

在wxss里加入以下代码:::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}
  • NAMECZ
  • NAMECZ
  • 2018-01-19 17:52:42
  • 871

微信小程序scroll-view高度设置及scroll-into-view的使用跳转

布局是左边导航栏,右边可上下滑动的子类表。 用到组件:scroll-view 第一个误区:height不能使用百分百。(实践可用百分百。不必要非用rpx或者px) 目前完成了点击添加索引clas...
  • yuki_haha
  • yuki_haha
  • 2017-05-27 11:06:00
  • 11018

微信小程序-横向滑动scroll-view隐藏滚动条

微信小程序-横向滑动scroll-view隐藏滚动条
  • qq_24734285
  • qq_24734285
  • 2016-12-28 19:53:04
  • 22289

小程序中scroll-view的使用

scroll-view可滚动视图区域。 使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。动态设置滚动条位置可以在js中设置滚动条的位置,比如我希望设置为滚动条的高度能够撑...
  • BeiLinYu
  • BeiLinYu
  • 2017-01-20 09:33:02
  • 12322

微信小程序-scroll-view滚动到索引位置(二)

有一些重要的关键点请看上一篇文章 微信小程序-scroll-view滚动到指定位置(一) 主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可 话不多说...
  • zhaoyazhi2129
  • zhaoyazhi2129
  • 2016-12-21 17:36:15
  • 14693

微信小程序把玩(九)scroll-view组件

scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要...
  • u014360817
  • u014360817
  • 2016-09-25 10:36:41
  • 52454

微信小程序 scroll-view滚动到索引位置

有一些重要的关键点请看上一篇文章微信小程序-scroll-view滚动到指定位置(一)主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可话不多说,看代码wx...
  • yelin042
  • yelin042
  • 2018-01-18 19:04:12
  • 301

小程序之scroll-view用法

小程序之scroll-view用法 水平滚动 <scroll-view class="box" scroll-x="true" &am...
  • Gochan_Tao
  • Gochan_Tao
  • 2018-04-11 19:07:18
  • 16

微信小程序----组件之scroll-view

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 根据文档写代码: 效果图: 项目结构: 核心代码: index.wxml:...
  • zhaihaohao1
  • zhaihaohao1
  • 2017-09-03 11:40:01
  • 168
收藏助手
不良信息举报
您举报文章:微信小程序 scroll-view隐藏滚动条详解
举报原因:
原因补充:

(最多只允许输入30个字)