滚动视图组件的bindscroll实例应用:自定义进度条

我们知道滚动视图组件作为滑动控件非常有用，有时我们想放置一个随滚动位置移动的进度条，但我们不想使用进度条api。我们做什么呢(当然，我自己写一个。我还能做什么[自黑冷漠脸])

嗯，没错。自己写一个就行了。[厚颜无耻的点头]

请看效果图。

那么怎么做呢？我通过滚动视图组件的bindscroll事件对其进行了自定义。让我们先看看文档：

朋友们，请看看。滚动时会触发bindscroll事件，触发时会生成scrollLeft、scrollTop等数据。好吧，让我们看看控制台。

不滚动时：

可以看到scrollLeft的值是0。

滚动到最右侧时：

scorllLeft的值变为大于222.6。

这意味着滚动的总长度范围是0~222.6，所以我们可以根据滚动范围设置一个比例，动态设置红线进度条的水平距离。

粘贴代码

wxml

//红线进度条的wxml，动态设置其左值View class=' Scroll-line ' View class=' Scroll-move ' style=' left : { { View left } } RPX '/View/View JS

//滚动触发函数scrolmovescrolmove : function(e){//获取滚动距离var left=e . detail . scrolleft；//向左增加滚动距离(位移)。进度条的set data({ view left : left })} dynamic也是一个简单的小方法。欢迎大家的建议~