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

选项卡tab和swpier之间的套用

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

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

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

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

那么上菜！！！

home.wxml

<view class='wrpg'><view class='wrpg-bottom'><view class='myOrder'><view class='myTips'><text>我的订单</text></view><view class='allOrder' ><view class='item-Order' wx:for="{{allOrder}}" wx:key='' ><view class='washcar' bindtap='toOrder' data-index='{{index}}' data-id='{{item.id}}'><image class='washcarImg' src="{{item.washcar}}" ></image><text class='tips'>{{item.tips}}</text></view>      </view></view></view></view>
</view>

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,//这里就是你需要的传递数组的idwashcar: "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


<view class='wrpg'><view class='wrpg-top'><view class="content-titles"><view class='washcar {{index==indexNum?"active":""}}' wx:for="{{washcar}}" data-index='{{index}}' wx:key="" bindtap='tabChange'><text>{{item.tips}}</text></view></view></view><view class='wrpg-content'><swiper vertical="{{false}}" current='{{indexNum}}' bindchange='Change'><!-- 第一屏 --><swiper-item><view class=''>washcar</view></swiper-item><!-- 第二屏 --><swiper-item><view class="select-content-titles"><view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{selecttab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'><text>{{item.tips}}</text></view></view><view wx:if='{{idx == 0}}' class='tab1' data-id='0'><image class='tab1Img' src="../images/order.png"></image><text>你暂时还没有违章查询~</text></view><view wx:if='{{idx == 1}}' class='tab2' data-id='1'>222</view><view wx:if='{{idx == 2}}' class='tab3' data-id='2'>333</view><view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view></swiper-item><!-- 第三屏 --><swiper-item><view class="select-content-titles"><view class='selectContent {{idx == index? "type-item-on" : ""}}' wx:for="{{ordertab}}" data-index='{{index}}' wx:key="" bindtap='checkviolation'><text>{{item.tips}}</text></view></view><view wx:if='{{idx == 0}}' class='tab1' data-id='0'>000</view><view wx:if='{{idx == 1}}' class='tab2' data-id='1'><image class='tab1Img' src="../images/order.png"></image><text>你暂时还没有商品~</text><text class='buyMore'>去逛逛~</text></view><view wx:if='{{idx == 2}}' class='tab3' data-id='2'><image class='orderDetailImg' src="../images/orderDetail.png"></image></view><view wx:if='{{idx == 3}}' class='tab3' data-id='3'>444</view></swiper-item><!-- 第四屏 --><swiper-item><view class=''>vip</view></swiper-item></swiper></view>
</view>

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.jsPage({/*** 页面的初始数据*/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事件,根本就是两个事件，无法再一个事件里实现，我一直纠结在使用一个事件来实现，导致一直卡壳。想复杂了
其实我是一个前端小白，从后台转过了也才没有多久，希望有不对可以指正。广泛交友。共同成长