微信小程序做一个Tab栏切换

内容：三个导航栏：附近，全部分类，排序

实现思路：
放两个view的盒子，上面的盒子放三个导航栏，下面放一个存放数据的盒子
下面存放数据的盒子用一个变量来判断是否显示，默认是隐藏，三个导航栏都有一个点击事件，点击的时候拿到对应的id，并且让下面的盒子显示，并且渲染对应id的数据就行了（改变wx：for循环渲染的内容）

 <view class='navbtns'>
    <view class='navitem nearby' bindtap='navitation' data-id='01'>
      附近
      <image src="{{selectedNav === '01' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
    </view>
    <view class='line'></view>
    <view class='navitem sort' bindtap='navitation' data-id='02'>
      全部分类
      <image src="{{selectedNav === '02' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
    </view>
    <view class='line'></view>
    <view class='navitem rank' bindtap='navitation' data-id='03'>
      排序
      <image src="{{selectedNav === '03' ? '../../images/arrow_up.png' : '../../images/arrow_down.png'}}"></image>
    </view>
  </view>

  <view class='wrap'>
    <view class='spinner' wx:if='{{showspinner}}'>
      <view class='items'>
        <block wx:for="{{spinners}}" wx:for-item='item' wx:key="item.id">
          <view class='item'>{{item.name}}</view>
        </block>
      </view>
    </view>
  </view>

navitation(event) {
        let id = event.currentTarget.dataset.id;
        const that = this;
        console.log(id);
        if (id == that.data.selectedNav) {
            id = '00';
            that.setData({
                showspinner: false,
            })
        } else {
            that.setData({
                showspinner: true,
            })
        }
        console.log(id);
        that.setData({
            selectedNav: id,
        })
        let temps = that.data.spinners;
        if (id == '02') {
            temps = that.data.sort;
        } else if (id == '03') {
            temps = that.data.rank;
        } else if (id == '01') {
            temps = that.data.nearby;
        }
        that.setData({
            spinners: temps,
        })

    },