想实现效果:

点击后跳转

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. 搭建sublime.txt环境结合使用python

    { "cmd": ["python3", "-u", "$file"] }

  2. Java项目开发中实现分页的三种方式一篇包会

    前言   Java项目开发中经常要用到分页功能,现在普遍使用SpringBoot进行快速开发,而数据层主要整合SpringDataJPA和MyBatis两种框架,这两种框架都提供了相应的分页工具,使用 ...

  3. AT2163 [AGC006B] Median Pyramid Easy

    需要一点灵感的题目. 可以发现这样一个事情,当三个数中有两个数相同时,中为数一定是这两个相同的数. 基于这个观察,我们想让每一行都存在这样两个相同的两个数,就一定能保证第一层的值为 \(x\) 了. ...

  4. JS 选择结构语句与循环结构语句

    笔记整理自:廖雪峰老师的JS教程 选择结构 与Java使用一致. 需要注意的 JavaScript把null.undefined.0.NaN和空字符串''视为false,其他值一概视为true. 循环 ...

  5. js 保护网站

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!--禁止鼠标右键代码--><noscript><iframe src=*.html&g ...

  6. LNMP架构的源码编译以及yum安装

    LNMP架构的源码编译以及yum安装 目录 LNMP架构的源码编译以及yum安装 一.LNMP架构的编译安装 1. 安装nginx服务 (1)关闭防火墙 (2)安装依赖包 (3)创建运行用户 (4)编 ...

  7. Leetcode随缘刷题之寻找两个正序数组的中位数

    我一上来没读清题,想着这题这么简单,直接就上手写了: package leetcode.day_12_05; import java.util.ArrayList; import java.util. ...

  8. PL/SQL批量执行SQL脚本文件

    1.选择File > New > Command Windows(命令窗口) 2.输入 @ 符号,之后敲击回车键.从本地选择执行的 SQL脚本 等待批量命令全部执行成功,关闭页面即可 新增 ...

  9. Solution -「GLR-R2」教材运送

    \(\mathcal{Description}\)   Link.   给定一棵包含 \(n\) 个点,有点权和边权的树.设当前位置 \(s\)(初始时 \(s=1\)),每次在 \(n\) 个结点内 ...

  10. Solution -「LOCAL」「cov. 牛客多校 2020 第五场 C」Easy

    \(\mathcal{Description}\)   Link.(完全一致)   给定 \(n,m,k\),对于两个长度为 \(k\) 的满足 \(\left(\sum_{i=0}^ka_i=n\r ...