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

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

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

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

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

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

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

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

效果图：

代码：

扫描二维码关注公众号，回复： 11539457 查看本文章

<view id="findOuter">
    <!-- 选择登记类型 -->
    <view id="chooseType" class="{{currentBoxId == 'chooseType' ? 'show' : 'hidden'}}">
        <view id="one" class="fadeBox"></view>
        <button id="chooseTypenext" bindtap="changeBox">下一步</button>
    </view>

    <!-- 查看说明 -->
    <view id="viewInstruction" class="{{currentBoxId == 'viewInstruction' ? 'show' : 'hidden'}}">
        <view id="two" class="fadeBox"></view>
        <button id="viewInstructionPrev" bindtap="changeBox">上一步</button>
        <button id="viewInstructionNext" bindtap="changeBox">下一步</button>
    </view>

    <!-- 填写信息 -->
    <view id="fillInInformation" class="{{currentBoxId == 'fillInInformation' ? 'show' : 'hidden'}}">
        <view id="three" class="fadeBox"></view>
        <button id="fillInInformationPrev" bindtap="changeBox">上一步</button>
        <button id="fillInInformationNext" bindtap="changeBox">下一步</button>
    </view>

    <!-- 完成提示 -->
    <view id="finish" class="{{currentBoxId == 'finish' ? 'show' : 'hidden'}}">
        <view id="four" class="fadeBox"></view>
        <button id="finishPrev" bindtap="changeBox">上一步</button>
    </view>
</view>

  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;
}