想实现效果:

点击后跳转

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跳转到不同的分页的更多相关文章

  1. 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  2. 微信小程序之 页面跳转 及 调用本地json的假数据调试

    一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...

  3. 微信小程序和微信小程序之间的跳转和传参示例代码附讲解

    一:微信小程序跳转 使用限制 需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序. 需要用户确认跳转 从 2.3.0 版本开始,在 ...

  4. 微信小程序 - Request | 路由跳转 | 本地存储

    Request 官方文档 wx.request相当于发送ajax请求 参数 属性 类型 默认值 必填 说明 url string   是 开发者服务器接口地址 data string/object/A ...

  5. 微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json

    微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app ...

  6. 微信小程序页面无法跳转

    推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错   要跳转的路径是否位于TabBar中 页 ...

  7. 微信小程序——navigator无法跳转

    今天在做小程序的时候,发现用navigator无法进行跳转.url 路径也是对的. 后面发现是因为我需要跳转的页面定义在了tabBar里面的.如下图: 如果需要跳转到tabBar里面定义的这些页面,需 ...

  8. 微信小程序:页面跳转时传递数据到另一个页面

    一.功能描述 页面跳转时,同时把当前页面的数据传递给跳转的目标页面,并在跳转后的目标页面进行展示 二.功能实现 1. 代码实现 test1页面 // pages/test1/test1.js Page ...

  9. 关于微信小程序的动态跳转

    最近在研究微信小程序.在做一个简单的购物小程序时,遇到一个问题:如何通过扫码实现动态的跳转页面功能, 通过研究终于找到了解决方法: 首先当然要实现扫码解析功能js的代码: click: functio ...

随机推荐

  1. golang中结构体中的嵌套

    package main import "fmt" type Base struct { name string } func (b *Base) m1() int { retur ...

  2. 集合框架-ArrayList练习(去除ArrayList集合中的重复元素)

    1 package cn.itcast.p3.arraylist.test; 2 3 import java.util.ArrayList; 4 import java.util.Iterator; ...

  3. java-异常-异常注意事项

    1 package p1.exception; 2 3 /* 4 * 异常的注意事项: 5 * 6 * 1,子类在覆盖父类方法时,父类的方法如果抛出了异常, 7 * 那么子类的方法只能抛出父类的异常或 ...

  4. python 小兵(5)参数

    我们目前为止,已经可以完成一些软件的基本功能了,那么我们来完成这样一个功能:约x 1 2 3 4 5 pint("拿出手机") print("打开陌陌") pr ...

  5. echarts图表的封装

    其实echarts官网有个快速上手的教程,一般人看一遍也知道是怎么回事,先给个传送门吧--五分钟上手 引入方式多种多样就自己去官网看了--这里简单介绍echarts怎么用,下方的封装函数比较重要 1. ...

  6. CentOS 7下iptables配置添加修改规则端口方法(转)

    简介: Linux CentOS 7默认没有安装iptables,默认的防火墙是firewalld,云吞铺子分享CentOS 7系统下iptables安装.iptables规则配置(放行或者禁用端口) ...

  7. 关于在findViewById()方法时遇到的一些问题

    最近需要做一个关于色卡的App,需要用到LayoutInflater来实现标签动态切换View界面,但是发现在使用过程中App突然会闪退, 闪退目前已解决. 先看下关于findViewById()的详 ...

  8. JavaBean基本概念

    JavaBean 是特殊的 Java 类,使用 Java 语言书写,并且遵守 JavaBean API 规范. JavaBean 与其它 Java 类相比而言独一无二的特征: 提供一个默认的无参构造函 ...

  9. Java 中使用正则表达式校检IP是否输入正确

    感谢大佬案例:https://www.jb51.net/article/114671.htm 正则表达式学习:(待办)近期总结

  10. list和tuple的用法区别

    1.list中是可变的,tuple不可变  所以tuple没有insert, pop,append方法 2.定义只有一个元素的tuple的时候,必须加逗号,否则不会被认为是tuple,而被识别为括号 ...