小程式選項卡以及swiper套用（跨頁面）
阿新 • • 發佈：2020-06-23
選項卡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,//這裡就是你需要的傳遞陣列的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
<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,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,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: "已成功"
},tips: "已撤銷"
},tips: "全部"
},ordertab: [{
id: 0,tips: "待付款"
},tips: "待收貨"
},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事件,根本就是兩個事件，無法再一個事件裡實現，我一直糾結在使用一個事件來實現，導致一直卡殼。想複雜了
其實我是一個前端小白，從後臺轉過了也才沒有多久，希望有不對可以指正。廣泛交友。共同成長
如果大家還想深入學習，可以點選兩個精彩的專題：javascript選項卡操作方法彙總 jquery選項卡操作方法彙總
為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。