欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序選項(xiàng)卡以及swiper套用（跨頁面）

 更新時(shí)間：2020年06月19日 15:50:31   作者：Rechal_Mei  
這篇文章主要為大家詳細(xì)介紹了小程序選項(xiàng)卡以及swiper套用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

其實(shí)我之前寫過一篇選項(xiàng)卡的切換demo，大家闊以參考一下 小程序多個(gè)選項(xiàng)卡切換
那今天寫這個(gè)demo呢，是因?yàn)轫?xiàng)目需求，所以僅供參考。

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

首先看一下效果圖吧

當(dāng)我點(diǎn)擊違章查詢

跳轉(zhuǎn)到對(duì)應(yīng)的頁面展示對(duì)應(yīng)的內(nèi)容

那么上菜！?。?/p>

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;
/* 保持行級(jí) */
 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: "商場(chǎng)訂單"
 },
 {
 id: 3,
 washcar: "images/peo.png",
 tips: "會(huì)員"
 },
 ],
//事件處理函數(shù)，通過url傳參

 toOrder(e){

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

OK！上一個(gè)頁面?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>你暫時(shí)還沒有違章查詢~</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>你暫時(shí)還沒有商品~</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接收上一個(gè)頁面home的數(shù)組id：

onload事件里刷新order.wxml的選項(xiàng)卡數(shù)組下標(biāo)，
這樣就是從上一個(gè)頁面子元素進(jìn)入本頁面的對(duì)應(yīng)子元素。

但是

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

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

// pages/home/order/order.js

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 idx: 0, //默認(rèn)選中第一項(xiàng)
 indexNum: 0,
 washcar: [{
 tips: "洗車"
 },
 {
 tips: "違章查詢"
 },
 {
 tips: "商城訂單"
 },
 {
 tips: "會(huì)員"
 },
 ],
 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: "待評(píng)價(jià)"
 },
 ],
 },
//導(dǎo)航欄點(diǎn)擊事件
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },
 //選項(xiàng)卡滑動(dòng)
 Change(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },
 //查詢違章選項(xiàng)卡
 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
 })
 },

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

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

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

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

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

相關(guān)文章

最新評(píng)論