小程序模仿商城（分类）

分类之首页面

页面布局

在说页面的布局之前，我先提问一个这样的问题：image 是该称之为标签还是组件呢？

说实话，我查了查没有查出来，可能是我对搜索引擎的使用还是么有掌握精髓的原因吧
但是，我在看别人的博客时，有的人称之为标签，有的人称之为组件，但是官方文档却将其列到了组件里，可能官方认为应该称之为组件吧，但是既然有的人称之为标签，再加上在平时pc端写网页时称之为标签，所以我就姑且的称之为标签吧

页面的布局其实很简单，左边和右边个一个 scroll-view标签

切换效果的实现

所谓的切换效果就是当你点击左边的一个分类时，改分类的字体颜色改变并且左边多一个 ```border``以及右边对应数据的改变

左侧切换效果

实现这个效果其实很简单，大致思路就是提前在css样式里写好选中样式的效果（active），但点击那个分类时，就给这个分类的 class 加上 active 这个值

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

具体实现思路，在 data 中添加一个属性 currentIndex ，令这个值默认为0（代表默认选中第一个分类），为每个分类添加点击事件getLeftIndex，并传递其 index，在事件处理中令 currentIndex 的值为传进去的 index 的值，最后使用三目运算符对 currentIndex 和 index进行判断等于加上 active，不等与便不用添加

getLeftIndex(e) {
   
  let index = e.currentTarget.dataset.index;
  this.setData({
   
    currentIndex: index,
    // 点击不同的分类出现不同的数据
    rightMenuList: this.Cats[index].children
  })
  console.log(this.data.rightMenuList);
}

在说点击不同的分类出现不同的数据时，先说一下，这个页面的数据是如何处理的，数据主要由三大部分组成：左边的数据leftMenuList和右边的数据rightMenuList，和请求的全部数据 Cates，全部数据包含了 leftMenuList和rightMenuList，为了渲染数据时候的方便才将其分为两部分

处理左边和右边的数据时，我忘了使用map()这个方法，使用了forEach()，代码如下

getCatData().then(res => {
   
  // 1.forEach
  // this.Cates = res.data.message;
  // let letfMenu = [],
  //     rigthContent = [];
  // this.Cates.forEach(item => {
   
  //   letfMenu.push(item.cat_name);
  //   rigthContent.push(item.children)
  // })
  // this.setData({
   
  //   leftMenuList: letfMenu,
  //   rightMenuList: rigthContent[0]
  // })
  // 2.map
  this.Cates = res.data.message;
  let leftMenuList = this.Cates.map(v => v.cat_name);
  let rightMenuList = this.Cates[