小程序选项卡以及swiper套用（跨页面）

选项卡tab和swpier之间的套用

其实我之前写过一篇选项卡的切换demo，大家阔以参考一下 小程序多个选项卡切换
那今天写这个demo呢，是因为项目需求，所以仅供参考。

首先，我是拿到了home.wxml的数组下标，
通过url传参的方式去将这个数组id传到下一个页面，
下一个页面接收以后再将id赋值给对应的tab或者currentId（swiper 的下标）
实现上一个页面进来以后直接进入对应的页面。

首先看一下效果图吧
当我点击违章查询

跳转到对应的页面展示对应的内容

那么上菜！！！

home.wxml

  
    
      
        我的订单
      
      
      
        
          
          {{item.tips}}
              
      
      
    
  

home.wxss

.wrpg {
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.myOrder {
  margin: 20rpx auto;
  width: 100%;
  height: 260rpx;
  background: #fff;
  border-radius: 10rpx;
}

.myTips {
  font-size: 30rpx;
  font-weight: bold;
  margin: 10rpx;
}

.allOrder {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-Order {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.washcar {
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
/* 保持行级 */
  flex-flow: column nowrap;
  font-size: 25rpx;
}

.washcarImg {
  width: 45rpx;
  height: 45rpx;
}

.tips {
  margin-top: 10rpx;
}

home.js

数组写在data里
allOrder: [{
      id:0,//这里就是你需要的传递数组的id
        washcar: "images/water.png",
        tips: "洗车"
      },
      {
        id:1,
        washcar: "images/bank.png",
        tips: "违章查询"
      },
      {
        id: 2,
        washcar: "images/money.png",
        tips: "商场订单"
      },
      {
        id: 3,
        washcar: "images/peo.png",
        tips: "会员"
      },
    ],
//事件处理函数，通过url传参

  toOrder(e){

    var id = e.currentTarget.dataset.id;
    console.log(id);
    wx.navigateTo({
      url: 'order/order?id='+id,
    })
  },

OK！上一个页面传递成功，那么结下来就是接收了
order.wxml

  
    
      
        {{item.tips}}
      
    
  
  
    
      
      
        washcar
      
      
      
        
          
            {{item.tips}}
          
        
        
          
          你暂时还没有违章查询~
        
        222
        333
        444
      
      
      
        
          
            {{item.tips}}
          
        
        
        000
        
        
        
          你暂时还没有商品~
          去逛逛~
        
        
        
         
        
        444
      
      
      
        vip
      
    

  

order.wxss

/* pages/home/order/order.wxss */

page {
  width: 100%;
  height: 100%;
  background: rgb(244, 246, 250);
}

.wrpg-top {
  width: 100%;
  height: 80rpx;
  background: #fff;
}

.content-titles {
  display: flex;
  justify-content: center;
  align-items: center;
}

.washcar {
  width: 200rpx;
  height: 100rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
  font-size: 30rpx;

}

.active {
  font-size: 40rpx;
  font-weight: bold;
}

swiper{
    width:100%;
  height: 1100rpx;


}
.select-content-titles{
width: 100%;
height: 80rpx;
background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectContent{
    width: 200rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10rpx;
  font-size: 25rpx;
}
.type-item-on {
border-bottom: 4rpx solid rgb(95, 162, 238);
color: rgb(95, 162, 238);
}
.tab1,.tab2{
width: 100%;
height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  font-size: 30rpx;
}
.tab1Img{
   width: 100rpx;
  height: 100rpx;
}
.buyMore{
  color: rgb(95, 162, 238);
}
.orderDetailImg{
width: 100%;
height: 600rpx;
margin: 10rpx;
}

1.接下来就是需要在在order.js接收上一个页面home的数组id：
onload事件里刷新order.wxml的选项卡数组下标，
这样就是从上一个页面子元素进入本页面的对应子元素。

但是

我的这里拿到这个homeid以后没有直接赋值给我的washcar数组的id。
我是赋值给了我的swiper的下标indexNum。
因为我的swiper 和导航的选项卡数组下标做了联动，我只需要改其中之一就能实现。所以我就取巧了，不建议这样做，只是我刚好有罢了

2.在swiper里，利用swiper组件的属性 current拿到对应的滑块的下标，
将滑块的下标赋值给我的order.wxml的选项卡数组下标，就可以实现滑动的同时，刷新tab对应的选项样式。

// pages/home/order/order.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    idx: 0, //默认选中第一项
    indexNum: 0,
    washcar: [{
        tips: "洗车"
      },
      {
        tips: "违章查询"
      },
      {
        tips: "商城订单"
      },
      {
        tips: "会员"
      },
    ],
    selecttab: [{
        id: 0,
        tips: "处理中"
      },
      {
        id: 1,
        tips: "已成功"
      },
      {
        id: 2,
        tips: "已撤销"
      },
      {
        id: 3,
        tips: "全部"
      },

    ],
    ordertab: [{
        id: 0,
        tips: "全部"
      },
      {
        id: 1,
        tips: "待付款"
      },
      {
        id: 2,
        tips: "待收货"
      },
      {
        id: 3,
        tips: "待评价"
      },
    ],
  },
//导航栏点击事件
  tabChange: function(e) {
    var navigitionIndex = e.currentTarget.dataset.index;
    this.setData({
      indexNum: navigitionIndex
    })

  },
  //选项卡滑动
  Change(e) {
    var cur = e.detail.current;
    this.setData({
      indexNum: cur
    })
  },
  //查询违章选项卡
  checkviolation(e) {
    let that = this;
    let index = e.currentTarget.dataset.index;
    that.setData({
      idx: index,
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var id = options.id;
    this.setData({
      indexNum:id
    })
  },

一开始我想点击事件和滑动事件都共用一个滑动事件，通过判断来控制下标，但bindtap和滑动里的bindchange事件,根本就是两个事件，无法再一个事件里实现，我一直纠结在使用一个事件来实现，导致一直卡壳。想复杂了
其实我是一个前端小白，从后台转过了也才没有多久，希望有不对可以指正。广泛交友。共同成长