微信小程序分类菜单

wxml：

<view class="navigation">
          <scroll-view scroll-y="true" style="height:100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
            <view class="zong">
              <view wx:for="{{tabitem}}" wx:key="index" class="item-text {{tabIndex===index?'activity':''}}" bindtap="setTab" data-index="{{index}}">{{item.title}}
              </view>
            </view>
            <view style="width:100%;height:300rpx;"></view>
          </scroll-view>
        </view>

js:

 data: {
    tabs: ["护肤品", "周边好物"],
    tabitem: [{
        id: 0,
        title: "新品套装"
      },
      {
        id: 1,
        title: "洁面乳"
      },
      {
        id: 2,
        title: "精华乳"
      },
      {
        id: 3,
        title: "乳液"
      },
      {
        id: 4,
        title: "隔离防晒"
      },
      {
        id: 5,
        title: "爽肤水"
      },
      {
        id: 6,
        title: "眼部护理"
      },
      {
        id: 7,
        title: "面膜"
      },
      {
        id: 8,
        title: "面霜"
      },
      {
        id: 9,
        title: "卸妆"
      },
      {
        id: 10,
        title: "单品"
      }
    ],
    
  setTab: function(e) {
    console.log(e.currentTarget.dataset.index)
    this.setData({
      tabIndex: e.currentTarget.dataset.index,
    })
  },

wxss:

.zong {
  display: flex;
  flex-direction: column;
}
.navigation {
  width: 25%;
  height: 100%;
  /* top: 102rpx; */
  position: fixed;
  background-color: #eee;
}
.item-text {
  width: 100%;
  height: 120rpx;
  background: #fff;
  text-align: center;
  line-height: 120rpx;
  background: #eee;
  font-size: 24rpx;
}

.item-text.activity {
  background: #ff98be;
  color: #fff !important;
  border-color: #fe7ca9;
}