在做項目的，遇到一個要制作側邊欄選擇卡的效果匹表，然后就開始了開發(fā)之路并徘。

wxml

<!--內容滑塊區(qū)  -->
<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:'手機數(shù)碼'}
], 
    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,
    })

    //點擊執(zhí)行 對應產品內容
    that.ProductBlock();

  },

這是效果圖

image.png