微信小程序滚动视图仿拼多多横向滑动滚动条

本文实例为大家分享了微信小程序横向滑动滚动条的具体代码，供大家参考，具体内容如下

效果图

实现代码

index.wxml

scroll-view scroll-x=' true ' class=' scroll-view-x ' style=' padding-top :10 rpx ' scroll-with-animation=' true ' wx : if=' { { tlist[当前选项卡]} .第二个列表}}”向左滚动='0' bindscroll='getleft '！-内容区域-view view class=' navigator _ second ' wx : for=' { { tlist[CurrentTab]} .第二个列表} } ' wx : for-item='子项' bind tap=' GetProductLiST ' data-id=' { {子项。id } } ' image class=' navigator _ icon ' src=' http : { {子项。icon } } '/image text class=' navigator _ text ' {子项。name } }/text/view/view view wx : if=' { { tlist[CurrentAb]} .第三个列表} } ' view class=' navigator _ second ' wx : for=' { { tlist[CurrentTab]} .第三个列表} } ' wx : for-item='子项' data-id=' { {子项。id } } ' bind tap=' GetProductList ' image class=' navigator _ icon ' src=' http : { {子项。icon } } '/image text class=' navigator _ text ' {子项。name } }/text/view/scroll-view！-滚动条部分-view wx : if=' { { Slid } } ' class=' slide ' view class=' slide-bar ' view class=' slide-show ' style=' width : { { slide width } } rpx；margin-left:{{slideLeft=1？0 : slide left ' rpx ' } } '/view/view/view index . js

//获取应用实例var app=GetApp()；页面({ data: { navigate _ type: ' '，//分类类型，是否包含二级分类slideWidth: ' '，//滑块宽slideLeft:0，//滑块位置总计： ' ',//当前滚动列表总长slideShow:false，slideRatio:'' }，on load : function(){ var self=this；var系统信息=wx。getsysteminfosync()；self.setData({ list: _list，windowheight : app。全球数据。导航类型==1？系统信息。窗户高度：系统信息。窗口高度-35，窗口宽度：系统信息。窗口宽度，navive _ type : app。全球数据。navive _ type })//计算比例自我。get ratio()；}, //根据分类获取比例getRatio(){ var self=this；if(！自我。数据。t列表[自我。数据。CurrentTab].第二张名单| |自我。数据。自我。数据。当前选项卡]。第二个名单。长度=5){这个。setdata({幻灯片放映： false })else { var _ TotaL length=self。数据。自我。数据。当前选项卡]。第二个名单。长度* 150；//分类列表总长度var _ ratio=230/_ TotaL Ength *(750/this)。数据。窗口宽度)；//滚动列表长度与滑条长度比例var _ show长度=750/_ TotaL长度* 230；//当前显示红色滑条的长度（保留两位小数)这个。setdata({ slide width : _ show length，totalLength: _ totalLength，slideShow: true，slideRatio:_ratio }) } }，//slideLeft动态变化getleft(e){ this。setdata({ slide left : e . detail。偷这个。数据。滑动比})})索引。页面样式表。滚动-视图-x {底色： # fff空白： nowrap}.navigator _ second { width :150 rpx；文本对齐：居中；显示：内嵌块；高度：115rpx}。navigator _ icon { width :60 rpx；高度：60rpx}。navigator _ text { display :块；宽度：100%;font-size:24rpx} .幻灯片{ height:30rpx背景# fff :100%；padding:14rpx 0 5rpx 0 } .滑动。滑杆{ width :230 rpxmargin :0 auto height :1.5 px背景技术# eee}。滑动。滑杆。幻灯片放映{身高：100%；背景-color : # ff 6969；}项目地址：微信小程序横向滑动滚动条

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。