微信小程序的左右列表联动

效果图：

直接上代码：

wxml界面:

<view class='header'>

<text class='headerClass'>分类</text>

<text class='headerPin'>/品牌</text>

<view class="search">

<image src='/images/搜索.png'></image>

<text>搜索商品</text>

</view>

</view>

<view class='main'>

<view class='left'>

<scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true">

<block wx:for="{
  
  {leftText}}" wx:for-list="item">

<view class="{
  
  {classfiySelect == item.id?'active':''}}" data-id='{
  
  {item.id}}' bindtap='left_list'>

<text>{
  
  {item.text1}}</text>

</view>

</block>

</scroll-view>

</view>

<view class='right'>

<scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{
  
  {scrollTop}}" scroll-into-view="{
  
  {'inToview'+rigId}}" scroll-with-animation="true">

<block wx:for="{
  
  {rightData}}" wx:for-list="item">

<view class='itemTitle' id="{
  
  {'inToview'+item.id}}">{
  
  {item.title}}</view>

<view bindtap='particulars' class='listItem' data-id='{
  
  {item.id}}'>

<block wx:for="{
  
  {item.frist}}">

<view class='listItem2' data-text="{
  
  {}}">

<view class='img'>

<image src='{
  
  {item.url}}'></image>

</view>

<view class='listText'>

<text>{
  
  {item.text}}</text>

<text class='money'>¥{
  
  {item.money}}</text>

<view>

<text>已售{
  
  {item.sum}}</text>