[JavaScript知识库]微信小程序 页面路由 实现页面切换

实现效果

实现代码

实现代码与vue十分相似

//.wxml

<!-- 切换的Tab卡 -->
<view class="food_tab">
  <view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap="checkCurrent">
    <!-- class通过currentData判断当前页面 -->
    <!-- 绑定current“识别器” -->
    <!-- 绑定checkCurrent事件 -->
    当前订单 
  </view>
  <view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap="checkCurrent">
    历史订单
  </view>
</view>
<!-- 页面 -->
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item>
    <view class='swiper_con'>当前订单页面</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>历史订单</view>
  </swiper-item>
</swiper>

//.js

...省略
    /**
     * 页面的初始数据
     */
    data: {
        currentData : 0,

    },
    // 获取当前索引值
    bindchange:function(e){
        const that  = this;
        that.setData({
          currentData: e.detail.current
        })
      },
    //点击切换，滑块Data赋值
    checkCurrent:function(e){
        const that = this;
     
        if (that.data.currentData === e.target.dataset.current){
            return false;
        }else{
     
          that.setData({
            currentData: e.target.dataset.current
          })
        }
      },

...省略