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

Rechal_Mei

最新推荐文章于 2026-02-15 00:14:44 发布

关注

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

选项卡tab和swpier之间的套用其实我之前写过一篇选项卡的切换demo，大家阔以参考一下小程序多个选项卡切换那今天写这个demo呢，是因为项目需求，所以仅供参考。我是拿到了home.wxml的数组下标，通过url传参的方式去将这个id传到下一个页面，下一个页面接收以后再将id赋值给对应的tabI或者currentId（swiper 的下标）实现上一个页面进来以后直接进入对应的页...

开通可读全文 ·3.5k 人阅读

最低0.47元/天解锁文章

选项卡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-i