scroll-view组件bindscroll实例应用：自定义滚动条

LucasTwilight 发布于2019-08-02 10:42 / 2214人阅读

摘要：我们知道组件作为滑动控件非常好用，而有时候我们想放置一个跟随滚动位置来跟进的滚动条，但又不想用滚动条该怎么办呢当然是自己写一个呗还能怎么办自黑冷漠脸嗯，没错。厚脸皮点头请看效果图那么如何做呢我是通过组件的事件来自定义的。

我们知道scroll-view组件作为滑动控件非常好用，而有时候我们想放置一个跟随滚动位置来跟进的滚动条，但又不想用滚动条api该怎么办呢？（当然是自己写一个呗还能怎么办[自黑冷漠脸]）

嗯，没错。自己写一个就好了啊。[厚脸皮点头]

请看效果图

那么如何做呢？我是通过scroll-view组件的bindscroll事件来自定义的。让我们先看看文档：

请小伙伴们看看，滚动时会触发bindscroll事件，触发时会生成scrollLeft、scrollTop等的数据；好，那让我们console一下看看。

没滚动时：

可以看到scrollLeft的值为0

滚动到最右边时：

scorllLeft的值变为222.6多了

这就说明滚动的总长度范围是0~222.6，那么，我们可以根据滚动范围来制定一个比例，动态的设置红线滚动条的水平距离。

贴上代码

wxml

//红线滚动条的wxml，动态设置其left值

//滚动触发函数scrollMove
scrollMove: function(e) {
    //获取滚动距离
    var left = e.detail.scrollLeft;
    //将滚动距离（位移）动态添给滚动条的left
    this.setData({
        viewleft: left
    })
}

也是很简易的一个小方法，欢迎各位提建议噢~

附：我的github地址

谢谢各位小伙伴~

GPU云服务器云服务器自定义html滚动条自定义选择组件自定义进度条自定义滚动库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52527.html

scroll-view组件bindscroll实例应用：自定义滚动条

摘要：我们知道组件作为滑动控件非常好用，而有时候我们想放置一个跟随滚动位置来跟进的滚动条，但又不想用滚动条该怎么办呢当然是自己写一个呗还能怎么办自黑冷漠脸嗯，没错。厚脸皮点头请看效果图那么如何做呢我是通过组件的事件来自定义的。我们知道scroll-view组件作为滑动控件非常好用，而有时候我们想放置一个跟随滚动位置来跟进的滚动条，但又不想用滚动条api该怎么办呢？（当然是自己写一个呗还能怎...

BenCHou 2019-08-22 17:59 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

selfimpr 2019-08-29 15:42 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

hellowoody 2019-08-22 18:00 评论0 收藏0
618购物节来袭，电商陪你浪浪浪

摘要：导航栏导航栏用的组件，设置其水平方向滑动，点击到的字体会变换样式。而且，导航栏点击不同的类别会将主页替换成不同的结构，这就要将最开始的主页结构隐藏起来。前言购物节又要来啦！！（撒花撒花！）零食打折啦！！衣服打折了！！小伙伴们准备好买买买了吗！！！让我看看我还多少余额哈！（满心期待(*￣︶￣)）（10秒后......）好吧我还是写个电商小程序过过瘾好了。[冷漠脸]咳咳，让我们进入正题...

MarvinZhang 2019-08-02 10:41 评论0 收藏0
微信小程序开发-个人总结

微信小程序开发总结基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结提醒微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的）注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...

FrancisSoung 2019-08-21 11:17 评论0 收藏0