微信小程序左右联动菜单（即可左联动，也可右联动）

<!-- 搜索 -->

<view class="search">

<input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input>

<image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image>

</view>

<!-- 左侧导航 -->

<view class='tui-fixed-left'>

<scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{leftMenuTop}}">

<text class="menu-item {{index === currentActiveIndex ? 'menu-active' : ''}}" wx:for="{{navList}}" wx:key="unique" data-index="{{index}}" id='{{index}}' catchtap='changeMenu'>{{item.c_name}}</text>

</scroll-view>

</view>

<!-- 右侧滚动商品 -->

<view class='content'>

<scroll-view class='tui-city-scroll-y' scroll-y="true" style='height:92%;' scroll-with-animation="true" scroll-top="{{rightProTop}}" bindscroll="scroll">

<view class='pro-item' wx:for="{{navList}}" wx:key="unique">

<view class='tui-list-head' id='NAV{{index}}'>{{item.c_name}}</view>

<view class='tui-list-li'>

<view class='goods-box' wx:for-item='items' wx:for="{{item.list}}" wx:key="unique" >

<image class='goodsImg' src='{{items.url}}'></image>

<view class='goodsName'>{{items.goodsName}}</view>

</view>

</view>

</view>

</scroll-view>

</view>

page{

font-family: "微软雅黑";

background-color:#f0f0f0;

}

.search{

width:100%;

height:88rpx;

background-color:#5196ff;

box-sizing: border-box;

padding-top:18rpx;

position: fixed;

left: 0;

top: 0;

}

.search-box{

width:690rpx;

height:57rpx;

margin-left:30rpx;

background-color:#fff;

box-sizing: border-box;

padding-left: 60rpx;

border-radius: 57rpx;

font-size: 26rpx;

}

.question-mark{

width:30rpx;

height:30rpx;

position: absolute;

left:45rpx;

top:30rpx;

}

.tui-fixed-x{

/* margin-left: 130px; */

position: fixed;

top: 89rpx;

left: 0;

}

.tui-fixed-left{

width: 180rpx;

height: 100%;

border-right: 1px solid #dfdfdf;

position: fixed;

background-color:#f5f5f5;

top: 89rpx;

left: 0;

}

.tui-list-head{

height:65rpx;

line-height: 65rpx;

}

.tui-city-scroll{

width: 100%;

}

.menu-item{

font-size: 26rpx;

box-sizing: border-box;

height: 100rpx;

line-height: 100rpx;

width: 180rpx;

background-color:#fff;

display: block;

border-bottom: 1px solid #dfdfdf;

position: relative;

z-index: 10;

text-align: center;

}

.menu-active{

border-left:10rpx solid #5196ff;

background-color:#f0f0f0;

}

.content{

width:570rpx;

box-sizing: border-box;

padding-left: 20rpx;

padding-right: 20rpx;

height: 100%;

position: fixed;

top: 89rpx;

right: 0;

}

.tui-city-scroll-y{

height: 100%;

box-sizing: border-box;

}

.tui-list-head{

height: 65rpx;

line-height: 65rpx;

font-size: 28rpx;

font-weight: 700;

}

.tui-list-li{

background-color:#fff;

/* height: 400px; */

overflow: hidden;

color: #fff;

font-size: 50rpx;

box-sizing: border-box;

padding:20rpx 0 0 0;

}

.goods-box{

width:170rpx;

/* height: 100rpx;

background: #c00; */

overflow: hidden;

margin-right:10rpx;

/* margin-bottom: 10rpx; */

float:left;

}

.tui-list-li .goods-box:nth-child(3n){

margin-right:0rpx;

}

.goodsImg{

display: block;

width:100rpx;

height: 100rpx;

margin:0 auto;

margin-bottom: 15rpx;

}

.goodsName{

width:100%;

overflow: hidden;

box-sizing: border-box;

height: 42rpx;

line-height: 42rpx;

text-align: center;

font-size: 24rpx;

text-overflow: ellipsis;

white-space: nowrap;

color: #333;

margin-bottom: 20rpx;

}