想实现效果:
点击后跳转
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 ...
随机推荐
- MySQL技术内幕(一)
MySQL技术内幕 2. InnoDB存储引擎 2.1 InnoDB存储引擎概述 特点:行锁设计.支持MVCC.支持外键.提供一致性非锁定读 2.2 InnoDB体系架构 2.2.1 后台线程 Inn ...
- Kindle连接移动的 Wi-Fi 时要求进行网页浏览器登陆怎么办?
在电脑上新建一个新文件,名为"WIFI_NO_NET_PROBE",同时把后缀名删掉,让它变成一个无格式文件.Kindle 连接电脑,把新建的文件放进Kindle的根目录,断开Ki ...
- Nginx全面介绍 什么是Nginx?
目录 一:Nginx全面讲解 1.简介: 2.nginx的用武之地 3.关于代理(解析含义作用) 二:正向代理 三:反向代理 四:项目应用场景 五:正向代理与反向代理区别 1.正向代理 2.反向代理 ...
- 日志模块详细介绍 hashlib模块 动态加盐
目录 一:hashlib模块 二:logging 一:hashlib模块 加密: 将明文数据通过一系列算法变成密文数据(目的就是为了数据的安全) 能够做文件一系列校验 python的hashlib提供 ...
- Vue2和Vue3技术整理1 - 入门篇 - 更新完毕
Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...
- 从服务端生成Excel电子表格(GcExcel + SpreadJS)
在服务端生成Excel电子表格,除了使用 Node.js + SpreadJS 外,葡萄城官方推荐使用 SpreadJS + GcExcel.该方案不仅能够解决批量绑定数据源并导出Excel.批量修改 ...
- JSP、Servlet和Spring MVC
感谢原博主!!!https://blog.csdn.net/whut2010hj/article/details/80874008 版权声明:本文为博主原创文章,遵循CC 4.0 BY版权协议,转载请 ...
- jsp include html 乱码问题
感谢大佬:https://blog.csdn.net/sessionsong/article/details/38778853 在使用<%@ include page=""% ...
- axios 之cancelToken原理以及使用
看axios文档的时候发现cancelToken这个东东,这个是用来取消ajax请求的,一般原生的话用的是abort()这个方法.看到这玩意的第一感觉是用起来有点麻烦,但是看了内部实现,发现还是比较有 ...
- iOS证书(.p12)和描述文件(.mobileprovision)生成制作教程 By h.l
iOS证书(.p12)和描述文件(.mobileprovision)制作 证书类型分为2种,开发证书和发布证书 1.开发证书(iOS Certificates (Development))(用于真机调 ...