实现效果
实现代码
实现代码与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})}},...省略
如果觉得《微信小程序 页面路由 实现页面切换》对你有帮助，请点赞、收藏，并留下你的观点哦！
