想实现效果:

点击后跳转
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/
- 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名
小程序点击跳转外部页面 1.index.wxml 添加点击事件 标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...
- 微信小程序和微信小程序之间的跳转和传参示例代码附讲解
一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...
- 微信小程序 - Request | 路由跳转 | 本地存储
Request 官方文档 wx.request相当于发送ajax请求 参数 属性 类型 默认值 必填 说明 url string 是 开发者服务器接口地址 data string/object/A ...
- 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json
微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...
- 微信小程序页面无法跳转
推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错 要跳转的路径是否位于TabBar中 页 ...
- 微信小程序——navigator无法跳转
今天在做小程序的时候,发现用navigator无法进行跳转.url 路径也是对的. 后面发现是因为我需要跳转的页面定义在了tabBar里面的.如下图: 如果需要跳转到tabBar里面定义的这些页面,需 ...
- 微信小程序:页面跳转时传递数据到另一个页面
一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...
- 关于微信小程序的动态跳转
最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...
随机推荐
- 一步一步超级详细的zabbix安装教程
安装说明: 1. 虚拟机上安装两台全新Linux: zabbix-server:192.168.255.128 zabbix-agent :192.168.255.129 2. zabbix-serv ...
- MySQL数据库索引介绍
一.什么是索引 索引是mysql数据库中的一种数据结构,就是一种数据的组织方式,这种数据结构又称为key 表中的一行行数据按照索引规定的结构组织成了一种树型结构,该树叫B+树 二.为何要用索引 优化查 ...
- MySQL 行锁、表锁
1. 多个事务操作同一行数据时,后来的事务处于阻塞等待状态.这样可以避免了脏读等数据一致性的问题.后来的事务可以操作其他行数据,解决了表锁高并发性能低的问题 2.InnoDB的行锁是针对索引加的锁,不 ...
- 使用Xamarin开发移动应用示例——数独游戏(六)使用数据库
项目代码可以从Github下载:https://github.com/zhenl/ZL.Shudu .代码随项目进度更新. 现在我们希望为应用增加更多的功能,比如记录每个完成的游戏,可以让用户自己添加 ...
- POJ 1927 Area in Triangle 题解
link Description 给出三角形三边长,给出绳长,问绳在三角形内能围成的最大面积.保证绳长 \(\le\) 三角形周长. Solution 首先我们得知道,三角形的内切圆半径就是三角形面积 ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
- JAVA类加载器二 通过类加载器读取资源文件
感谢原文作者:不将就! 原文链接:https://www.cnblogs.com/byron0918/p/5770684.html 一.getResourceAsStream方法 getResourc ...
- where子句和having子句区别
感谢大佬:https://blog.csdn.net/XiaopinOo/article/details/78305008 where子句和having子句的区别: 1.where 不能放在grou ...
- DLL链接库
转载请注明来源:https://www.cnblogs.com/hookjc/ 2. 静态链接库 对静态链接库的讲解不是本文的重点,但是在具体讲解 DLL 之前,通过一个静态链接库的例子可以快速地帮助 ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...