想实现效果:
点击后跳转
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/