被点击触发事件效果

被点击触发事件效果

wbe前端 小程序

功能：点击左侧菜单中的内容，显示红色字体和左边框，并在右侧有相应商品内容显示

效果如图：

1 获取被点击标题身上的索引

2 给 data 中的 currentIndex 赋值

3 根据不同的索引来渲染右侧的商品内容

在wxss先给描述被点击事件的动作效果:

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

在js中的data里面加入 currentIndex 存放当前索引数据：

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

在wxml的循环里加入 条件样式{ {index===currentIndex? ‘active’:’’}} ，然后绑定事件handleItemTap ，让 data-index 传递数据

<!-- 左侧菜单 开始 -->
    <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>

回到 js 加入 左侧菜单的点击事件 handleItemTap ，先利用console.log(e)找出被点击菜单的索引信息在 e.currentTarget.dataset

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

完成！查看效果