Clicked trigger event effect

Clicked trigger event effect

wbe front-end applet

Function: Click on the content in the left menu to display the red font and the left frame, and display the corresponding product content on the right

The effect is as shown in the figure:

1 Get the index on the clicked title

2 Assign a value to currentIndex in data

3 Render the product content on the right according to different indexes

In wxss, first describe the action effect of the clicked event:

.active{
      color:var(--themeColor);
      border-left: 5rpx solid currentColor;
    }

Add currentIndex to the data in js to store the current index data:

data: {
      //左侧的菜单数据
      leftMenuList:[],
      //右侧商品数据
      rightContentList:[],
      //被点击的左侧的菜单索引
      currentIndex:0,
  },

Add a conditional style {{index===currentIndex? 'active':''}} in the loop of wxml , and then bind the event handleItemTap to let the data-index pass the data

<!-- 左侧菜单 开始 -->
    <scroll-view class="left_menu" scroll-y="true" >
      <view class="menu_item {
   
   {index===currentIndex? 'active':''}}"
      wx:for="{
   
   {leftMenuList}}"
      wx:key="*this"
      wx:for-item="item"
      wx:for-index="index"
      bindtap="handleItemTap"
      data-index="{
   
   {index}}"
      >
        {
   
   {item}}
      </view>
    </scroll-view>

Go back to js and add the click event handleItemTap of the left menu, first use console.log(e) to find out the index information of the clicked menu in e.currentTarget.dataset

handleItemTap(e){
    const{index}=e.currentTarget.dataset;
    //根据左侧不同的索引值来渲染右侧的商品内容
    let rightContentList = this.Cates[index].children;
    this.setData({
      currentIndex:index,
      rightContentList,
    })
    //console.log(e);
  }

Finish! View the effect