微信小程序隐藏右侧滚动条样式

微信小程序去掉滚动条

我在写这个无限加载的时候

这个滚动条会给用户一种感觉就是在加载

当我去掉这个滚动条后

在下滑的时候 就会显得特别的平滑

小程序滚动条

解决方案

我们需要将 最外层的 page 页面设置固定高度

我们在 根目录下的 app.wxss 内将page设置 100vh

page{
height: 100vh;
overflow: hidden;
}

然我们需要回到我们想要去掉滚动条的页面

scroll-view 进行包裹 并且把 它的宽度和高度分别设置为 百分百

style="width: 100%; height:100%"

我们发现不能动了

我们需要设置 竖向 滚动

scroll-y="{{true}}" 

微信小程序scroll-view

然后我们发现 滚动条还在呀!!这是为什么

我们需要在 app.wxss 中在加入一串代码

::-webkit-scrollbar{
display: none;
color: transparent;
}

然后就OK了

后期问题

这样处理后我们想做这个上滑加载 官方的

onReachBottomDistance 设置页面上拉触底事件触发时距页面底部距离,单位为px。

onReachBottom就会失效 我们需要使用

scroll-view 提供的方法来处理上拉事件

lower-threshold // 设置距离底部多少的时候触发事件
bindscrolltolower // 绑定事件

微信小程序

微信小程序

总结

我们需要固定 外层页面长度为手机显示大小

然后我们 套上一层 scroll-view 和页面一样大小

然后我们 操作 scroll-view 的样式即可

默认的样式因为 页面固定大小了 我们不是滚动 这个页面了 所以就不会有滚动条了!

上一篇

node服务端解决socket.io跨域问题express,koa