网站建设问答小编今天给大家整合了一篇有关《小程序实现自定义滚动条》的文章，关于小程序实现自定义滚动条的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

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

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

　　分类区域使用小程序的scroll-view，绑定bindscroll事件，动态计算scroll-left的距离

　　滚动条区域写用两个view模拟滚动条，滚动条的宽度和滚动距离都根据分类的内容来计算

　　{{item.catName}}

　　复制代码

　　.scroll-wrap {

　　width: 100%;

　　box-sizing: border-box;

　　background: #ffffff;

　　}

　　.scroll {

　　height: 100%;

　　box-sizing: border-box;

　　}

　　.scroll-x {

　　display: flex;

　　width: 100%;

　　white-space: nowrap;

　　overflow-x: auto;

　　}

　　.scroll-item {

　　width: 138rpx;

　　display: inline-block;

　　margin-right: 10rpx;

　　padding: 0 24rpx 27rpx;

　　font-size: 24rpx;

　　color: #4e4e4e;

　　font-family: PingFangSC-Regular, PingFang SC;

　　}

　　.scroll-bar {

　　background: #ffffff;

　　}

　　.scroll-bar__bg {

　　position: relative;

　　width: 86rpx;

　　height: 6rpx;

　　background: #d4d8dd;

　　border-radius: 5px;

　　margin: 0 auto;

　　overflow: hidden;

　　}

　　.scroll-bar__slide {

　　position: absolute;

　　top: 0;

　　left: 0;

　　height: 100%;

　　background: rgba(233, 89, 14, 1);

　　border-radius: 5px;

　　}

　　复制代码

　　data: {

　　percent: 0,       //滚动条距离左边的距离

　　barW: 0,          //滚动条的宽度

　　}

　　countCatWidth () {

　　var query=wx.createSelectorQuery();

　　//选择id

　　var that=this;

　　query.select('.scroll-item').boundingClientRect(function (rect) {

　　let sw=(rect.width+5)*that.data.catList.length+5

　　that.setData({

　　barW: (86/sw)*wx.getSystemInfoSync().windowWidth

　　})

　　}).exec();

　　},

　　//bindscroll事件

　　spikeScroll(e) {

　　let barW=(86/e.detail.scrollWidth)*wx.getSystemInfoSync().windowWidth

　　this.setData({

　　barW: barW,

　　percent: (86/e.detail.scrollWidth)*e.detail.scrollLeft

　　})

　　},

  目前，《小程序实现自定义滚动条》页面仍在完善中，后续将为您提供丰富、全面的关于《小程序实现自定义滚动条》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。