当前位置: 首页 > Web前端 > HTML

scroll-view组件绑定scroll示例应用:自定义滚动条

时间:2023-04-02 21:42:13 HTML

我们知道scroll-view组件作为滑动控件非常好用,但是有时候我们想在滚动位置后面放一个滚动条,但是我们没有想使用scrollAPI应该怎么办?(当然,自己写一个还能怎么样[紫黑冷漠脸])嗯,没错。自己写一个就好了。[厚脸皮点头]看效果图那你是怎么做到的呢?我是通过scroll-view组件的bindscroll事件自定义的。先看一下文档:请朋友们看一下,滚动的时候会触发bindscroll事件,触发的时候会产生scrollLeft,scrollTop等数据;好吧,让我们看一下控制台。不滚动时:可以看到scrollLeft的值为0,滚动到最右边:scorllLeft的值变成222.6多了,也就是说滚动的总长度从0到222.6。然后,我们可以根据滚动范围制定一个比例,动态设置红线滚动条的水平距离。粘贴红线滚动条的代码wxml//wxml,动态设置其left值js//滚动触发函数scrollMovescrollMove:function(e){//获取滚动距离varleft=e.detail.scrollLeft;//在滚动条左侧动态添加滚动距离(位移)this.setData({viewleft:left})}也是一个很简单的方法,欢迎大家指教~附上:我的github地址,谢谢大家~