想實現效果：

點選後跳轉

wxml：

<viewclass="fiveson"> <viewclass="fiveson-son"bindtap="onepay"> <viewclass="son-icon"> <imagesrc="../../images/icon/oneimg.png"></image> </view> <viewclass="son-name">待付款</view> </view> <viewclass="fiveson-son"bindtap="twopay"> <viewclass="son-icon"> <imagesrc="../../images/icon/secondimg.png"></image> </view> <viewclass="son-name">待發貨</view> </view> <viewclass="fiveson-son"bindtap="threepay"> <viewclass="son-icon"> <imagesrc="../../images/icon/thirdimg.png"></image> </view> <viewclass="son-name">待收貨</view> </view> <viewclass="fiveson-son"bindtap="fourpay"> <viewclass="son-icon"> <imagesrc="../../images/icon/fourthimg.png"></image> </view> <viewclass="son-name">已完成</view> </view> <viewclass="fiveson-son"bindtap="fivepay"> <viewclass="son-icon"> <imagesrc="../../images/icon/fivethimg.png"></image> </view> <viewclass="son-name">退款/售後</view> </view> </view> 對應的js： //點選待付款跳轉 onepay:function(e){ wx.navigateTo({ url:'/pages/order-lists/index?cid=1', }) }, //點選待發貨跳轉 twopay:function(e){ wx.navigateTo({ url:'/pages/order-lists/index?cid=2', }) }, //點選待收貨跳轉 threepay:function(e){ wx.navigateTo({ url:'/pages/order-lists/index?cid=3', }) }, //點選已完成跳轉 fourpay:function(e){ wx.navigateTo({ url:'/pages/order-lists/index', }) }, //點選退款/售後跳轉 fivepay:function(e){ wx.navigateTo({ url:'/pages/order-lists/index?cid=4', }) }, 跳轉後的頁面wxml： <!--tab欄--> <viewclass="headerf-28col-3"> <viewcatchtap="bindHeaderTap"class="{{dataType==='all'?'active':''}}"data-type="all"> <text>全部</text> </view> <viewbindtap="bindHeaderTap"class="{{dataType==='payment'?'active':''}}"data-type="payment"> <text>待付款</text> </view> <viewbindtap="bindHeaderTap"class="{{dataType==='delivery'?'active':''}}"data-type="delivery"> <text>待發貨</text> </view> <viewbindtap="bindHeaderTap"class="{{dataType==='received'?'active':''}}"data-type="received"> <text>待收貨</text> </view> <viewbindtap="bindHeaderTap"class="{{dataType==='comment'?'active':''}}"data-type="comment"> <text>退款/售後</text> </view> </view> js： onLoad(options){ let_this=this; //設定scroll-view高度 _this.setListHeight(); //獲取索引 letpagecid=options.cid; console.log(pagecid); if(pagecid==1){ _this.setData({ dataType:options.type||'payment' }); }elseif(pagecid==2){ _this.setData({ dataType:options.type||'delivery' }); }elseif(pagecid==3){ _this.setData({ dataType:options.type||'received' }); }elseif(pagecid==4){ _this.setData({ dataType:options.type||'comment' }); }else{ _this.setData({ dataType:options.type||'all' }); } this.setData({ //dataType:e.currentTarget.dataset.type, list:{}, isLoading:true, page:1, no_more:false, }); //獲取訂單列表 this.getOrderList(options.type); }, 切換的程式碼（跟這題無關） /** *切換標籤 */ bindHeaderTap(e){ this.setData({ dataType:e.currentTarget.dataset.type, list:{}, isLoading:true, page:1, no_more:false, }); //獲取訂單列表 this.getOrderList(e.currentTarget.dataset.type); }, /** *獲取訂單列表（跟這題無關） */ getOrderList(isPage,page){ let_this=this; App._get('user.order/lists',{ page:page||1, dataType:_this.data.dataType },result=>{ letresList=result.data.list, dataList=_this.data.list; if(isPage==true){ _this.setData({ 'list.data':dataList.data.concat(resList.data), isLoading:false, }); }else{ _this.setData({ list:resList, isLoading:false, }); } }); },

參考連結：https://q.cnblogs.com/q/125957/