小程序实现自定义滚动条

在「小程序」中怎么实现这种横向滚动效果呢。

说起来也简单，直接上代码吧

1 .WXML

分类区域使用小程序的滚动视图，绑定bindscroll事件，动态计算向左滚动的距离滚动条区域写用两个视角模拟滚动条，滚动条的宽度和滚动距离都根据分类的内容来计算！-分类区域-view class=' scroll-wrap ' scroll-view scroll-x=' true ' scroll-with-animation=' true ' bind scroll=' spike scroll ' class=' scroll-x ' scroll-left ' } ' view class=' scroll-item index-nav ' wx : for=' { { CatList } } ' wx : key=' CatID ' view class=' index-nav-item flex-y-fs { { item selected？选中的" : " } } " data-idx=" { { index } } " data-catid=" { { item。catid } } " bind tap=" handleClickCat " view class=" cat-img-wrap " image class=" src "={ { item。catpicurl } } " mode="/image/view text { { item。catname } }/text/view/view/scroll-view/view！-滚动条区域-view class=' roll-bar ' view class=' roll-bar _ _ BG ' view class=' roll-bar _ _ slide ' style=' width : { { BarW } } rpx；左： { { percent } } rpx '/view/view/view复制代码

2 .CSS

.卷轴包装{宽度： 100%;盒子尺寸：边框盒子；background: # ffffff}。滚动{身高： 100%；盒子尺寸：边框盒子；}.scroll-x { display : flex；宽度： 100%;空白： nowrapoverflow-x : auto；}.滚动项目{ width: 138rpxdisplay:内联块；右边距： 10 rpxpadd : 0 24 rpx 27 rpx font-size : 24 rpx；color : # 4e4 efont-family : PingFangSC-普通，方平SC；}.滚动条{ background: # ffffff}。滚动条__bg {相对位置：宽度： 86rpx高度： 6rpx背景# d4d 8 ddborder-radius : 5px；margin: 0自动飞越：隐藏；}.滚动条_ _滑块{位置：绝对值；top : 0；左： 0；高度： 100%;背景： rgba(233，89，14，1)；边界半径： 5px}复制代码

3 .JS

数据： {百分比：0，//滚动条距离左边的距离barW: 0，//滚动条的宽度}/* 计算滚动区域的宽度*/count catit th(){ var query=wx。createselectorquery()；//选择身份证明（identification）变量=这个；query.select(' .滚动项目')。boundingClientRect(函数(rect){ let SW=(rect。宽度5)*即。数据。catlist。长度5。setdata({ bar w3 3360(86/SW)* wx。getsysteminfosync().windowWidth }) }).exec()；}，//bindscroll事件speak scroll(e){ let BarW=(86/e . detail。scrollwidth)* wx。getsysteminfosync().窗户宽度这个。setdata({ barW : barW，百分比：(86/e . detail。滚动宽度)* e .细节。scrolleft })}，