微信小程序左侧导航栏与右侧内容区商品联动并实现导航栏高亮

点击不同的导航栏获取不同的商品数据并在内容区渲染出来，导航栏点击后实现高亮，商品数据我用的静态数据用来做一个模拟数据，也可以使用请求api获取数据，代码如下

1. index.wxml

<view class="left_nav">
  <ul wx:for="{{nav_list}}"> 
    <li bindtap="nav_list" data-id="{{item.id}}" class="menu-item {{index===activeIndex?'active':''}}" data-index="{{index}}"><view style="margin-top:40rpx;">{{item.text}}</view></li>
  </ul>
</view>

2. index.wxss

.menu-item {
    color: #333;
    background-color: #fff;
  }
.menu-item.active {
  color: rgb(247, 31, 31);
  background-color: #f00;
}

3. index.js

data: {

activeIndex:0, //用作导航栏高亮

},



nav_list:function(e){

let id=e.currentTarget.dataset.id;

var index = e.currentTarget.dataset.index; //用作导航栏高亮

if(id==0){

this.setData({

activeIndex:index, //用作导航栏高亮

})

}else

if(id==1){

this.setData({

activeIndex:index,

commodity_list:[