想实现效果:

点击后跳转

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. 机器学习-逻辑回归与SVM的联系与区别

    (搬运工) 逻辑回归(LR)与SVM的联系与区别 LR 和 SVM 都可以处理分类问题,且一般都用于处理线性二分类问题(在改进的情况下可以处理多分类问题,如LR的Softmax回归用在深度学习的多分类 ...

  2. 【转载】Systemd 入门教程:实战篇

    作者: 阮一峰 日期: 2016年3月 8日 上一篇文章,我介绍了 Systemd 的主要命令,今天介绍如何使用它完成一些基本的任务. 一.开机启动 对于那些支持 Systemd 的软件,安装的时候, ...

  3. 005 Linux 命令三剑客之-sed

    grep:数据查找定位 awk:数据切片,数据格式化,功能最复杂 sed:数据修改 01 Linux 命令三剑客? 三剑客各有所长,和锅锅一一搞起就是了! sed:擅长数据修改. grep:擅长数据查 ...

  4. linux系统——Redis集群搭建(主从+哨兵模式)

    趁着这几天刚好有点空,就来写一下redis的集群搭建,我跟大家先说明,本文的redis集群因为linux服务器只是阿里云一台服务器,所以集群是redis启动不同端口,但是也能达到集群的要求.其实不同服 ...

  5. 使用 MVVM Toolkit Source Generators

    关于 MVVM Toolkit 最近 .NET Community Toolkit 发布了 8.0.0 preview1,它包含了从 Windows Community Toolkit 迁移过来的以下 ...

  6. Python初学笔记之可变类型、不可变类型

    python中 可变类型: 列表 list 字典 dict 不可变类型: 数字型:int.float.complex.bool.long 字符型 str 元组 tuple id(i):通过id查看变量 ...

  7. MapperScan注解 放在启动器上?

    package com.aaa.zxf; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boo ...

  8. java中的泛型,简单介绍。 修饰方法的用法

    一.<R>  ( R  r ) 默认object  可以存所有类型.   R 这个是随便定义的大写字母,前后要保持一致性! package com.aaa.test; /* * 演示 泛型 ...

  9. 有向图子图 DAG 数量

    考虑 \(\tt DP\),朴素的想法是令 \(f_S\) 表示 \(S\) 这个导出子图将边定向集合构成 \(\tt DAG\) 的方案数. 转移可以考虑剥去所有入度为 \(0\) 的点,那么我们就 ...

  10. attachEvent

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...