小程序用switchTab做侧边tab切换，数据取到了，但是内容没显示，请帮忙看下这是什么原因？

1.问题：小程序用switchTab做了一个侧边导航，数据是本地data.js做的一个暴露接口，现在点选tab能console出相应的数据，但是内容没显示。代码如下：

data.js：

function getClassData() {
  var arrays = [
    {
      id: 'erha',
      banner: '/images/erha_list_banner.jpg',
      cate: '拆家大队长',
      detail: [
        {
          thumb: '/images/erha.jpg',
          name: '二哈'
        }
      ]
    },
    {
      id: 'fanfan',
      banner: '/images/fanfan_list_banner.jpg',
      cate: '传说中的橘猫',
      detail: [
        {
          thumb: '/images/fanfan.jpg',
          name: '饭饭'
        }
      ]
    },
    {
      id: 'pingtouge',
      banner: '/images/pingtouge_list_banner.jpg',
      cate: '最无所畏惧的动物',
      detail: [
        {
          thumb: '/images/pingtouge.jpg',
          name: '平头哥'
        }
      ]
    },
    {
      id: 'qijiao',
      banner: '/images/qijiao_list_banner.jpg',
      cate: '短腿柯基',
      detail: [
        {
          thumb: '/images/qijiao.jpg',
          name: '七饺'
        }
      ]
    }
  ]
  return arrays
}

module.exports = {
  getClassData : getClassData
}

class.js：

    var classData = require('../../../utils/data.js')

Page ({
  data: {
    category: [
      { name: '二哈', id: 'erha' },
      { name: '饭饭', id: 'fanfan' },
      { name: '平头哥', id: 'pingtouge' },
      { name: '七饺', id: 'qijiao' }
    ],
    detailData: '',
    details: [
      {
        id: 'erha',
        banner: '/images/erha_list_banner.jpg',
        cate: '拆家大队长',
        detail: [
          {
            thumb: '/images/erha.jpg',
            name: '二哈'
          }
        ]
      }
    ],
    curIndex: 0,
    isScroll: false,
    toView: 'erha'
  },
  onReady() {
    // var self = this;
    // wx.request({
    //   url: 'http://www.gdfengshuo.com/api/wx/cate-detail.txt',
    //   success(res) {
    //     console.log(res.data)
    //     self.setData({
    //       detail: res.data.result
    //     })
    //   }
    // });

  },
  onLoad() {
    const _this = this;
    classData.getClassData();
    _this.setData({
      "details": classData.getClassData()[0]
    })
  },
  switchTab(e) {
    let index = e.target.dataset.index;
    classData.getClassData();
    this.setData({
      "curIndex": index,
      "details": classData.getClassData()[index]
    })
  }

})

class.wxml：


<view class="main">
    <view class="class-left">
        <view wx:for="{{category}}" wx:for-index="index" wx:for-item="item" wx:key="idx">
          <view data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'on':''}}">{{item.name}}</view>
        </view>
    </view>

    <scroll-view class="class-right" scroll-y="{{isScroll}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
        <block wx:for="{{details}}" wx:for-item="dt" wx:for-index wx:key="idx">
            <view data-id="{{dt.id}}" class="cate-box">
                <view class="cate-banner">
                    <image src="{{dt.banner}}" wx:if="{{dt.banner}}"></image>
                </view>
                <view class="cate-title">
                    <text>{{dt.cate}}</text>
                </view>
                <view class="product">
                    <view class="product-list" wx:for="{{dt.detail}}" wx:key="index" wx:for-item="val">
                        <navigator url="../detail/detail">
                            <image src="{{val.thumb}}" wx:if="{{val.thumb}}"></image>
                            <view class="classname"><text>{{val.name}}</text></view>
                        </navigator>
                    </view>
                </view>
            </view>
        </block>
    </scroll-view>
</view>

class.wxss：

@import '../../common/common.wxss';

page,.main {
    height: 100%;
}

.class-left {
    float: left;
    width: 150rpx;
    height: 100%;
    border-right: 1px solid #eeeeee;
    box-sizing: border-box;
}

.class-left .cate-list {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-left: 3px solid #ffffff;
}

.class-left .cate-list.on {
    color: #ddbb99;
    border-color: #ddbb99;
}

.class-right {
    float: right;
    width: 600rpx;
    height: 100%;
    overflow: hidden;
    
}

.cate-box {
    height: 100%;
    padding:40rpx;
    box-sizing: border-box;
}

.cate-box .cate-banner image {
    display: block;
    width: 100%;
    height: 190rpx;
}

.cate-title {
    position: relative;
    height: 30rpx;
    line-height: 30rpx;
    padding:30rpx 0 55rpx;
    text-align: center;
    color: #ddbb99;
    font-size: 28rpx;
}

.cate-title::before {
    position: absolute;
    left: 100rpx;
    top: 43rpx;
    content: '';
    width: 60rpx;
    height: 4rpx;
    background: #ddbb99;
}

.cate-title::after {
    position: absolute;
    right: 100rpx;
    top: 43rpx;
    content: '';
    width: 60rpx;
    height: 4rpx;
    background: #ddbb99;
}

.product-list {
    display: inline-block;
    width: 240rpx;
    height: 240rpx;
    text-align: center;
    margin:0 20rpx 20rpx 0;
    font-size: 24rpx;
}

.product-list image {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 20rpx;
    border-radius: 100px;
}

.product-list:nth-child(3n) {
    margin-right: 0;
}

想要实现的界面效果如下：
图片描述