想实现效果:

点击后跳转

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. gin中运行多个服务

    运行服务的返回类型为 :http.Handler .gin.New(),gin.Default() 返回的就是此类型.使用&http.Server{....} 设置服务参数使用g.Go(fun ...

  2. 【简记】SpringBoot禁用Swagger

    楔子 Swagger 是 Java Web 开发中常用的接口文档生成类库,在开发和前后端联调时使用它来模拟接口调用能提高开发效率.但是,在生产环境可能并不需要它,一个原因是启用它会延长程序启动时间(动 ...

  3. 学习Java第16天

    今天学习了HTML的表格,列表标签及表单. 顺序有点乱,明天学习swing awt,当时这部分大概过了一下,明天看视频 主要问题还是新概念较多,需要多理解,多记忆.

  4. 常见线程池之 newCacheThreadPool 缓存线程池 简单使用

    package com.aaa.threaddemo; import java.util.concurrent.BlockingQueue; import java.util.concurrent.E ...

  5. Python标准库:datetime 时间和日期模块 —— 时间的获取和操作详解

    datetime 时间和日期模块 datetime 模块提供了以简单和复杂的方式操作日期和时间的类.虽然支持日期和时间算法,但实现的重点是有效的成员提取以进行输出格式化和操作.该模块还支持可感知时区的 ...

  6. AT2395 [ARC071C] TrBBnsformBBtion

    基于观察,可以发现以下两条性质: A 可以到 BB,BB 也可以到 A,对 B <-> AA 也是同理的. 可以通过这两个操作交换相邻元素. 对于前者,只需证明 BB 可以到 A 即可,不 ...

  7. AT2043 [AGC004C] AND Grid

    首先可以发现一个很简单的想法,因为最外层是一定不会有 \(\#\) 的,所以可以考虑让第一个网格图将每个连通块的最外层包起来,第二个网格图将就选择这个包内部的所有点即可. 但你发现这个想法是很难实现的 ...

  8. Category基本概念

    1.什么是Category Category有很多种翻译: 分类 \ 类别 \ 类目 (一般叫分类) Category是OC特有的语法, 其他语言没有的语法 Category的作用 可以在不修改原来类 ...

  9. 自动循环滚动ScrollView

    // // SBCycleScrollView.h // SBCycleScrollView // // Created by luo.h on 15/7/12. // Copyright (c) 2 ...

  10. 聊天泡泡(仿微信)By-H罗

    在做私信时,聊天泡泡仿着QQ做时,聊天泡泡底图有露出,不怎么好看,微信的就比较好看,当时就因为那2行纠结了好久 - (void)viewDidLoad { [super viewDidLoad]; / ...