微信小程序实现购物页面左右联动

本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码，供大家参考，具体内容如下

效果图：

页面结构

view class=' pro-container ' scroll-view class=' left-menu ' scroll-y scroll-with-animation=' true ' scroll-top=' { { left menu top } } ' view class=' menu-item { { index===CurrentaVeindex ' ' menu-active ' : ' ' } } ' wx : for=' { { item } } ' wx : key=' { { item。index } } ' id=' { { index } } ' catch tap=' change menu ' { item。键入name } }/view/scroll-view scroll-view v-if=' item！=' ' ' class=' right-pro ' bind scroll=' scroll ' y scroll-with-animation=' true ' scroll-top=' { { right protop } } ' view class=' pro-item ' wx : for=' { { item } } ' view class=' item-header ' { item。type name } }/view view view class=' pro-item-container ' view wx : for=' { { item。shop _ goods } } ' wx : key=' { { index } '。左菜单{ position : absolute top : 0；左： 0；底部： 0；右： 0；宽度： 180 rpx背景-颜色： # f8f8font-size : 32 rpx} :-web工具包-滚动条{ width : 0；高度： 0;颜色：透明；}.左侧菜单。菜单项{ width : calc(100%-16rpx)；高度： 80rpxpadding:0 8rpx线高： 80 rpx文本对齐：中心；}.左侧菜单菜单项。菜单-活动{边框-左侧：8 rpx纯红；左填充： 0;背景-color : # fff；} /* 右边商品区域*/.right-pro {位置：绝对；left : 180 rpxtop :0 bottom : 0；宽度： calc(100%-180 rpx)；背景-color : # fff；显示： flex飞越：隐藏；}.右撇子专业项目{ padd :20 rpx}.右撇子。项标题{ display : inline-block；font-size : 30 rpx线高： 40 rpxcolor: # fff背景-颜色：红色；padd :0 rpx 30 rpxmargin : 10 rpx auto }。右撇子pro-item-container { font-size : 28 rpx；}.pro-item-item { width : calc)((100%-180 rpx)/2)；显示：内嵌块；}.右撇子专业项目容器图像{ width: 100rpx高度： 100 rpx显示器：块；margin: 0 auto}。右撇子专业项目容器文本{显示：块；文本对齐：中心；}wxjs

让prolistotop=[]，MenuTop=[]，MENU=0，windowHeight，timeoutId//MENU==是否为点击左侧进行滚动的，如果是，则不需要再次设置左侧的激活状态页面({ data: { proList: []，item: []，item2:[ { 'typename': ')服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，{ 'typename': '服饰，}，]，currentActiveIndex: 0 }，onLoad:函数（选项){///-Ajax-var utilmd 5=require('././utils/MD5。js’)；var MD5=utilmd 5。十六进制MD5定义变量时间戳=新日期()。getTime()；变量=这个；var jsonStr=JSON。stringify({ ' shopid ' : ' 34 ' })；var token=md5(jsonStr时间戳)时间戳；wx。请求({ URL : ' https://API。jvjiewang。com/Home/Shop/goods '，data: { jsonStr: jsonStr，token:method: 'POST '，header : { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，success 3360 function(RES){ console。日志(RES . data响应)；var项目=RES数据。回应；那个。setdata({ item : items })} })///-Ajax-//确保页面数据已经刷新完毕~ setTimeout(()={ this。getallrects()}，200) }，changeMenu(e) { //改变左侧标签栏操作如果(数量(例如目标。id)=这个。数据。current activindex)返回MENU=1 this。setdata({当前活动索引： Number(e . target。id)，右原型p : prolistoop[Number(e . target。id)]})这个。设置菜单动画(数字(例如目标。id))}，滚动(e){ for(让I=0；I ProlisToToToP . LengTii){ if(e . detail。滚动顶部ProlistoToP[I]I！==0 e .详细信息。滚动顶部ProlistoToP[I-1]){返回这个。setDIs(I)}//找不到匹配项，默认显示第一个数据if(！{这个。setdata({ CurrentAtveIndex : 0 })} MENU=0 }，setDis(i) { //设置左侧菜单栏的选中状态如果（我！==这个。数据。当前索引% 1！{这个。setdata({ CurrentAtveIndex : I-1 })} MENU=0 this。setMenuanimation(I)}，setMenuAnimation(i){ //设置动画，使菜单滚动到指定位置。

让self=this if(MenuTop[I]){ console。日志(11111)//节流操作if(timeoutId){清除超时(timeoutId)} timeoutId=setTimeout(()={控制台。日志(12138)自我。setdata({ left menuto p :(menuto top[I]).top - windowHeight) }) }，50)} else { if(this。数据。leftmenutop===0)返回这个。setdata({ leftmenuto p : { 0 })}，getactivereactions(){ wx。createselectorquery().选择全部('。菜单-活动')。boundingClientRect(函数(rects) {返回rects[0].top }).exec() }，getAllRects() { //获取商品数组的位置信息wx.createSelectorQuery().选择全部('。项目')。boundingClientRect(函数(rects){ rects。foreach(function(rect){ ProlistoTop。推动。top)})})).exec() //获取菜单数组的位置信息wx.createSelectorQuery().选择全部('。菜单项')。boundingClientRect(函数(rects){ wx。getsystem info({ success : function(RES){ window height=RES . window height/2 rects。foreach(function(rect){ MenuTop。推动({ top : rect。top，//动画3360矩形。顶窗高度})})}).exec() }，//获取系统的高度信息getsystem info(){ 0让self=这个wx。getsystem info({ success :函数(RES){ window height=RES . window height/2 } })})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。