小程序根据ID跳转到不同的分页

想实现效果：

 

 

 点击后跳转

 

 

 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/