小程序根据ID跳转到不同的分页
2021/12/8 20:19:08
本文主要是介绍小程序根据ID跳转到不同的分页,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
想实现效果:
点击后跳转
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/
这篇关于小程序根据ID跳转到不同的分页的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享