小程序点击“上一步”“下一步”显示不同内容

做毕设的时候想实现如下相似效果，点击按钮才会显示下一步应该显示的内容，可以回到上一步。

一开始没有思路，在交流群问大神们，过了几分钟一位小姐姐给出的建议是：

1区用template来做，然后2区页面跳转，这种方式的确可行，但是懒惰的我根本不想弄那么多页面^_^.

没有思路，只能无聊得拿页面点来点去，结果。。。还是没有思路。。。

几天过后，点着首页的tab切换，虎躯一震，我可以用显示隐藏来实现呀！

给按钮们绑定一個事件，分别用一个变量来记录当前按钮的id和当前要显示的box的id------currentId的，每次更新这个值，

其他跟tab切换的原理差不多。

效果图：

代码：

    
    
        
        下一步
    

    
    
        
        上一步
        下一步
    

    
    
        
        上一步
        下一步
    

    
    
        
        上一步
    

  data: {
    currentBoxId: 'chooseType', //当前显示的view的id
    isBoxShow: false
  },
  changeBox(e){
    let currentFlag = e.currentTarget.id;
    switch(currentFlag){
      case 'chooseTypenext':
        this.setData({
          currentBoxId: 'viewInstruction'
        })
        break;
      case 'viewInstructionPrev':
        this.setData({
          currentBoxId: 'chooseType'
        })
        break;
      case 'viewInstructionNext':
        this.setData({
          currentBoxId: 'fillInInformation'
        })
        break;
        case 'fillInInformationPrev':
          this.setData({
            currentBoxId: 'viewInstruction'
          })
          break;
        case 'fillInInformationNext':
          this.setData({
            currentBoxId: 'finish'
          })
          break;
        case 'finishPrev':
          this.setData({
            currentBoxId: 'fillInInformation'
          })
          break;
        default:
          this.setData({
            currentBoxId: 'viewInstruction'
          })
          break;
    }

  },

.fadeBox{
    width: 100%;
    margin-bottom: 20rpx;
}
#one{
    background: #f00;
    height: 400rpx;
}

#two{

    background: #ff0;
    height: 800rpx;
}

#three{
    background: #f0f;
    height: 300rpx;
}

#four{
    background: #00f;  
    height: 600rpx;
}

button{
    background: #cfc;
    margin-bottom: 20rpx;
}
.show{
    display: flex;
    flex-wrap: wrap;
}
.hidden{
    display: none;
}