想实现效果：

 

 

 点击后跳转

 

 

 wxml：

<view class="fiveson">         <view class="fiveson-son" bindtap="onepay">           <view class="son-icon">             <image src="../../images/icon/oneimg.png"></image>           </view>           <view class="son-name">待付款</view>         </view>         <view class="fiveson-son" bindtap="twopay">           <view class="son-icon">             <image src="../../images/icon/secondimg.png"></image>           </view>           <view class="son-name">待发货</view>         </view>         <view class="fiveson-son" bindtap="threepay">           <view class="son-icon">             <image src="../../images/icon/thirdimg.png"></image>           </view>           <view class="son-name">待收货</view>         </view>         <view class="fiveson-son" bindtap="fourpay">           <view class="son-icon">             <image src="../../images/icon/fourthimg.png"></image>           </view>           <view class="son-name">已完成</view>         </view>         <view class="fiveson-son" bindtap="fivepay">           <view class="son-icon">             <image src="../../images/icon/fivethimg.png"></image>           </view>           <view class="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栏 -->   <view class="header f-28 col-3">     <view catchtap="bindHeaderTap" class="{{dataType==='all'?'active':''}}" data-type="all">       <text>全部</text>     </view>     <view bindtap="bindHeaderTap" class="{{dataType==='payment'?'active':''}}" data-type="payment">       <text>待付款</text>     </view>     <view bindtap="bindHeaderTap" class="{{dataType==='delivery'?'active':''}}" data-type="delivery">       <text>待发货</text>     </view>     <view bindtap="bindHeaderTap" class="{{dataType==='received'?'active':''}}" data-type="received">       <text>待收货</text>     </view>     <view bindtap="bindHeaderTap" class="{{dataType==='comment'?'active':''}}" data-type="comment">       <text>退款/售后</text>     </view>   </view>   js：

 

onLoad(options) {     let _this = this;     // 设置scroll-view高度     _this.setListHeight();         //获取索引       let pagecid = options.cid;       console.log(pagecid);       if ( pagecid == 1 ) {          _this.setData({           dataType: options.type || 'payment'         });       } else if ( pagecid == 2 ) {         _this.setData({           dataType: options.type || 'delivery'         });       } else if ( pagecid == 3 ) {         _this.setData({           dataType: options.type || 'received'         });       } else if ( 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 => {       let resList = 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/