小程序選項卡以及swiper套用（跨頁面）

更新時間：2020年06月19日 15:50:31 作者：Rechal_Mei

這篇文章主要為大家詳細介紹了小程序選項卡以及swiper套用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

選項卡tab和swpier之間的套用，供大家參考，具體內(nèi)容如下

其實我之前寫過一篇選項卡的切換demo，大家闊以參考一下小程序多個選項卡切換
那今天寫這個demo呢，是因為項目需求，所以僅供參考。

首先，我是拿到了home.wxml的數(shù)組下標，通過url傳參的方式去將這個數(shù)組id傳到下一個頁面，下一個頁面接收以后再將id賦值給對應的tab或者currentId（swiper 的下標）
實現(xiàn)上一個頁面進來以后直接進入對應的頁面。

首先看一下效果圖吧

當我點擊違章查詢

跳轉(zhuǎn)到對應的頁面展示對應的內(nèi)容

那么上菜?。?！

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

數(shù)組寫在data里

allOrder: [{
 id:0,//這里就是你需要的傳遞數(shù)組的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: "會員"
 },
 ],
//事件處理函數(shù)，通過url傳參

 toOrder(e){

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

OK！上一個頁面?zhèn)鬟f成功，那么接下來就是接收了

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的數(shù)組id：

onload事件里刷新order.wxml的選項卡數(shù)組下標，
這樣就是從上一個頁面子元素進入本頁面的對應子元素。

但是

我的這里拿到這個homeid以后沒有直接賦值給我的washcar數(shù)組的id。
我是賦值給了我的swiper的下標indexNum。
因為我的swiper 和導航的選項卡數(shù)組下標做了聯(lián)動，我只需要改其中之一就能實現(xiàn)。所以我就取巧了，不建議這樣做，只是我剛好有罷了

2.在swiper里，利用swiper組件的屬性 current拿到對應的滑塊的下標，將滑塊的下標賦值給我的order.wxml的選項卡數(shù)組下標，就可以實現(xiàn)滑動的同時，刷新tab對應的選項樣式。

// pages/home/order/order.js

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 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,
 })

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum:id
 })
 },

一開始我想點擊事件和滑動事件都共用一個滑動事件，通過判斷來控制下標，但bindtap和滑動里的bindchange事件,根本就是兩個事件，無法再一個事件里實現(xiàn)，我一直糾結(jié)在使用一個事件來實現(xiàn)，導致一直卡殼。想復雜了

其實我是一個前端小白，從后臺轉(zhuǎn)過了也才沒有多久，希望有不對可以指正。廣泛交友。共同成長

如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總

為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: