在做项目的，遇到一个要制作侧边栏选择卡的效果，然后就开始了开发之路。

wxml

<!--内容滑块区  -->
<view class='borer_top dis-flex flex-justify mg_top20'> 

  <scroll-view scroll-y class='w_173' style='height:{{windowHeight}}px'>
        <view  wx:for="{{productData}}" data-id="{{item.classify_id}}" data-index="{{index}}"         class='{{index==indexs?"scroll_atc2":"scroll_atc1"}} ' bindtap='tap_product'>
        {{item.classify_name}}
        </view>
        <!-- <view class='scroll_atc2'>家用电器</view>
        <view class='scroll_atc1'>家用电器</view> -->
  </scroll-view>


<!-- 1111111111 -->
  <scroll-view class='w_557' scroll-y style="height:{{windowHeight}}px"> 

      <view wx:for="{{proBlcokData}}" wx:for-item="index_one"> 
        <view class='f_24 pd_50bt30'>{{index_one.classify_name}}</view>
        <view class='flex-wrapr borer_bottom'> 

            <view class='center pd_bt20' wx:for="{{index_one.category3}}" wx:for-item="index_two" data-categoryId="{{index_two.classify_id}}" data-prid="{{index_two.parent_id}}" data-name="{{index_two.classify_name}}" bindtap='navTo_name'>
             <image class='wh_100' src='{{index_two.img}}'></image>
             <view class='f_24'>{{index_two.classify_name}}</view>
            </view>
        </view>
      </view>

  </scroll-view>
</view>

js

  data: {
    productData:[
{classify_name:'家用电器'},
{classify_name:'手机数码'}
], 
    windowHeight:'', 
    indexs:0,
    typeId:1,
    proBlcokData:[
{'img':'img1.png' ,classify_name:'平板电视'},
{'img':'img2.png' ,classify_name:'空调'}
]
  },

  // 点击侧边栏标题
  tap_product:function(e){
    const that=this;

    that.setData({ 
      indexs:e.currentTarget.dataset.index,
      oneId: e.currentTarget.dataset.id,
    })

    //点击执行 对应产品内容
    that.ProductBlock();

  },

这是效果图

image.png