選項(xiàng)卡及對(duì)應(yīng)跳轉(zhuǎn)

好久沒有更新了，今天更新點(diǎn)東西。

大多數(shù)的商城類小程序都有這個(gè)功能，點(diǎn)擊“全部訂單”，“待付款”，“待發(fā)貨”，“待收貨”，“已完成”，會(huì)跳轉(zhuǎn)頁(yè)面且跳至與之相對(duì)應(yīng)的選項(xiàng)卡中。所以我們?cè)陂_發(fā)該小程序時(shí)也做了相同的功能。

選項(xiàng)卡靜態(tài)布局思路： 主要用到 scroll-view與 swiper標(biāo)簽，選項(xiàng)卡切換主要依靠 swiper 中的 current 屬性，不懂請(qǐng)自行查看小程序API。

跳轉(zhuǎn)頁(yè)面且跳至與之相對(duì)應(yīng)的選項(xiàng)卡思路：

首先在 app.js 中配置 globalData。

在“個(gè)人中心” js 文件中配置點(diǎn)擊該項(xiàng)跳轉(zhuǎn)至與之對(duì)應(yīng)的 tab 的 index。

在“個(gè)人中心”跳轉(zhuǎn)頁(yè)面時(shí)通過(guò) globalData 傳遞 index 給“全部訂單”頁(yè)面，“全部訂單”頁(yè)面通過(guò) app.globalData.currentLocation 接受數(shù)據(jù)，改變選項(xiàng)卡的切換。

app.js 代碼

? globalData: {

? ? userInfo: null

? }

個(gè)人中心 wxml 代碼

<!--九宮格? -->

<view class="page">

? <view class="page__bd">

? ? <view class="weui-grids">

? ? ? <view class="allrec" bindtap="allForm">

? ? ? ? ? <text>我的訂單</text>

? ? ? ? ? <view class="more">查看更多訂單</view>

? ? ? ? ? <image class='moreImg' src='../../img/more.png'></image>

? ? ? </view>

? ? ? <!--待付款? -->

? ? ? <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">

? ? ? ? <image class="weui-grid__icon" src="../../img/wallet.png" />

? ? ? ? <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>

? ? ? ? <view class="weui-grid__label label">待付款</view>

? ? ? </view>

? ? ? <!--待發(fā)貨? -->?

? ? ? <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">

? ? ? ? <image class="weui-grid__icon" src="../../img/wallet-1.png" />

? ? ? ? <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>

? ? ? ? <view class="weui-grid__label label">待發(fā)貨</view>

? ? ? </view>

? ? ? <!--已發(fā)貨? -->

? ? ? <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">

? ? ? ? <image class="weui-grid__icon" src="../../img/wallet-2.png" />

? ? ? ? <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>

? ? ? ? <view class="weui-grid__label label">待收貨</view>

? ? ? </view>

? ? ? <!--已完成? -->

? ? ? <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">

? ? ? ? <image class="weui-grid__icon" src="../../img/wallet-3.png" />

? ? ? ? <view class="weui-grid__label label">已完成</view>

? ? ? </view>

? ? </view>

? </view>

</view>

個(gè)人中心 js 代碼

var app = getApp()

var util = require('../../utils/util.js')

var formatLocation = util.formatLocation

Page({

? data: {

? },

? // 指定 全部訂單 和 九宮格中按鈕 點(diǎn)擊跳轉(zhuǎn)至 選項(xiàng)卡中 與之對(duì)應(yīng)的tab

? allForm:function(){

? ? app.globalData.currentLocation = 0,

? ? wx.navigateTo({ url: '../orderForm/orderForm' })

? },

? noPay:function(){

? ? app.globalData.currentLocation = 1,

? ? wx.navigateTo({ url: '../orderForm/orderForm' })?

? },

? noSend:function(){

? ? app.globalData.currentLocation = 2,

? ? wx.navigateTo({ url: '../orderForm/orderForm' })

? },

? sended:function(){

? ? app.globalData.currentLocation = 3,

? ? wx.navigateTo({ url: '../orderForm/orderForm' })

? },

? completed:function(){

? ? app.globalData.currentLocation = 4,

? ? wx.navigateTo({ url: '../orderForm/orderForm' })

? }

})

個(gè)人中心 wxss 代碼 (樣式可能會(huì)不全，需要引入weui.wxss文件)

/*九宮格? */

.weui-grids{

? border-left: none;

}

.weui-grid{

? width: 25%;

? border: none;

? position: relative;

? padding:20px 10px 10px;

}

.weui-grid .weui-badge{

width: 12rpx;

height: 28rpx;

border-radius: 50%;

? position: absolute;

? right: 40rpx;

? top: 20rpx;

? background: #df0202;

}

/* list? */

.weui-cell__hd{

? margin-right: 30rpx;

? vertical-align: middle;

? width:20px;

? height: 20px;

}

.weui-cell__hd image{

? width: 50rpx;

? height: 50rpx;

}

.weui-cell__ft{

? color: #fff;

? background: #dd3838;

? border-radius: 20rpx;

? text-align: center;

? margin-right: 10rpx;

? padding: 0 5rpx;

}

.all{

? ? font-size: 30rpx;

}

全部訂單 wxml 代碼

<!--全部訂單頁(yè)? -->

? <!--選項(xiàng)卡標(biāo)題? -->

<scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">

? <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>

? <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>

? <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待發(fā)貨</view>

? <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已發(fā)貨</view>

? <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>

</scroll-view>

?

<!-- 選項(xiàng)卡內(nèi)容 -->

<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">?

? ? <!-- 全部訂單 內(nèi)容 -->

? <swiper-item>?

? ? <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

? ? ? <view class="kong"></view>

? ? ? <!--寫入顯示內(nèi)容? -->

? ? ? <view class="list" wx:for="{{carts}}" wx:key="*this">

? ? ? ? <!-- 圖片 -->

? ? ? ? <view class="pic">

? ? ? ? ? <image src="{{item.imgurl}}"></image>

? ? ? ? </view>

? ? ? ? <!-- 類型表述 -->

? ? ? ? <view class="con">

? ? ? ? ? <text class="type1">{{item.type1}}</text>

? ? ? ? ? <text class="type2">{{item.type2}}</text>

? ? ? ? </view>

? ? ? ? <!-- 價(jià)格 -->

? ? ? ? <view class="price">

? ? ? ? ? <text class="price1">￥{{item.price}}</text>

? ? ? ? ? <text class="number">×{{item.num}}</text>

? ? ? ? </view>

? ? ? </view>

? ? </scroll-view>

? </swiper-item>?

? ? <!-- 待付款 內(nèi)容 -->

? <swiper-item>?

? ? <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

? ? ? <view class="kong"></view>

? ? ? <!--寫入顯示內(nèi)容? -->

? ? ? <view class="list" wx:for="{{carts}}" wx:key="*this">

? ? ? ? <!-- 圖片 -->

? ? ? ? <view class="pic">

? ? ? ? ? <image src="{{item.imgurl}}"></image>

? ? ? ? </view>

? ? ? ? <!-- 類型表述 -->

? ? ? ? <view class="con">

? ? ? ? ? <text class="type1">{{item.type1}}</text>

? ? ? ? ? <text class="type2">{{item.type2}}</text>

? ? ? ? </view>

? ? ? ? <!-- 價(jià)格 -->

? ? ? ? <view class="price">

? ? ? ? ? <text class="price1">￥{{item.price}}</text>

? ? ? ? ? <text class="number">×{{item.num}}</text>

? ? ? ? </view>

? ? ? </view>

? ? </scroll-view>

? </swiper-item>?

? ? <!-- 待發(fā)貨 內(nèi)容 -->

? <swiper-item>?

? ? <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

? ? ? <view class="kong"></view>

? ? ? <!--寫入顯示內(nèi)容? -->

? ? ?

? ? ? <view class="list" wx:for="{{carts}}" wx:key="*this">

? ? ? ? <!-- 圖片 -->

? ? ? ? <view class="pic">

? ? ? ? ? <image src="{{item.imgurl}}"></image>

? ? ? ? </view>

? ? ? ? <!-- 類型表述 -->

? ? ? ? <view class="con">

? ? ? ? ? <text class="type1">{{item.type1}}</text>

? ? ? ? ? <text class="type2">{{item.type2}}</text>

? ? ? ? </view>

? ? ? ? <!-- 價(jià)格 -->

? ? ? ? <view class="price">

? ? ? ? ? <text class="price1">￥{{item.price}}</text>

? ? ? ? ? <text class="number">×{{item.num}}</text>

? ? ? ? </view>

? ? ? </view>

? ? </scroll-view>

? </swiper-item>?

? ? <!-- 已發(fā)貨 內(nèi)容 -->

? <swiper-item>?

? ? <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

? ? ? <view class="kong"></view>

? ? ? <!--寫入顯示內(nèi)容? -->

? ? ? <view class="list" wx:for="{{carts}}" wx:key="*this">

? ? ? ? <!-- 圖片 -->

? ? ? ? <view class="pic">

? ? ? ? ? <image src="{{item.imgurl}}"></image>

? ? ? ? </view>

? ? ? ? <!-- 類型表述 -->

? ? ? ? <view class="con">

? ? ? ? ? <text class="type1">{{item.type1}}</text>

? ? ? ? ? <text class="type2">{{item.type2}}</text>

? ? ? ? </view>

? ? ? ? <!-- 價(jià)格 -->

? ? ? ? <view class="price">

? ? ? ? ? <text class="price1">￥{{item.price}}</text>

? ? ? ? ? <text class="number">×{{item.num}}</text>

? ? ? ? </view>

? ? ? </view>

? ? </scroll-view>

? </swiper-item>

? ? <!-- 已完成 內(nèi)容 -->

? <swiper-item>?

? ? <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

? ? ? <view class="kong"></view>

? ? ? <!--寫入顯示內(nèi)容? -->

? ? ? <view class="list" wx:for="{{carts}}" wx:key="*this">

? ? ? ? <!-- 圖片 -->

? ? ? ? <view class="pic">

? ? ? ? ? <image src="{{item.imgurl}}"></image>

? ? ? ? </view>

? ? ? ? <!-- 類型表述 -->

? ? ? ? <view class="con">

? ? ? ? ? <text class="type1">{{item.type1}}</text>

? ? ? ? ? <text class="type2">{{item.type2}}</text>

? ? ? ? </view>

? ? ? ? <!-- 價(jià)格 -->

? ? ? ? <view class="price">

? ? ? ? ? <text class="price1">￥{{item.price}}</text>

? ? ? ? ? <text class="number">×{{item.num}}</text>

? ? ? ? </view>

? ? ? </view>

? ? </scroll-view>

? </swiper-item>

</swiper>?

全部訂單 js 代碼

// 全部訂單頁(yè)

//獲取應(yīng)用實(shí)例

var app = getApp()

Page({

? /*** 頁(yè)面的初始數(shù)據(jù) */

? data: {

? ? // 選項(xiàng)卡

? ? winWidth: 0,

? ? winHeight: 0,

? ? // tab切換?

? ? currentTab: 0,

? ? // 商品內(nèi)容數(shù)據(jù)

? ? carts: [

? ? ? { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },

? ? ? { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },

? ? ? { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },

? ? ? { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },

? ? ],

? },

? /** * 滑動(dòng)切換tab? */

? bindChange: function (e) {

? ? var that = this;

? ? that.setData({ currentTab: e.detail.current });

? },

? /** * 點(diǎn)擊tab切換? */

? swichNav: function (e) {

? ? var that = this;

? ? if (this.data.currentTab === e.target.dataset.current) {

? ? ? return false;

? ? } else {

? ? ? that.setData({

? ? ? ? currentTab: e.target.dataset.current

? ? ? })

? ? }

? },

? /*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/

? onLoad: function (options) {

? ? var that = this;

? ? /** * 獲取系統(tǒng)信息? */

? ? wx.getSystemInfo({

? ? ? success: function (res) {

? ? ? ? that.setData({

? ? ? ? ? clientHeight: res.windowHeight

? ? ? ? });

? ? ? }

? ? });

? },

? /*** 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示*/

? onShow: function () {

? ? if (app.globalData.currentLocation == '') {

? ? ? this.setData({

? ? ? ? currentTab: 0

? ? ? });

? ? } else {

? ? ? var i = app.globalData.currentLocation;

? ? ? this.setData({

? ? ? ? currentTab: i

? ? ? });

? ? }

? }

})

全部訂單 wxss 代碼

.scroll-view_H{

? white-space: nowrap;

}

.scroll-view-item_H{

? display: inline-block;

? width: 20%;

? box-sizing: border-box;

}

.list-liu{

? width: 100%;

? height: 85rpx;

? position: fixed;

? left: 0;

? top: 0;

? z-index: 1;

? background: #fff;

? border: 1rpx solid #eee;

}

.on{

? color: #c80611;

}

.list-liu .swiper-tab-list{

? text-align: center;

? line-height: 85rpx;

? font-size: 34rpx;

}

.kong{

? width: 100%;

? height: 85rpx;

}

/*----------------------分割線-------------------? */

/*購(gòu)物車 全部訂單 我的收藏 瀏覽記錄 樣式? */

/* 列表 */

.list{width: 100%;background: #fff;margin-top:20rpx;display: flex;box-sizing: border-box;padding:10rpx 30rpx 10rpx 30rpx ;border-bottom: 1px solid #eee}

.carts-radio{flex: 1;line-height: 180rpx;text-align: center}/* 選項(xiàng)框 */

.pic{flex: 3;height: 180rpx;}

.pic image{width: 100%;height: 100%;}

.con{flex: 6;padding-left: 20rpx;padding-bottom: 20rpx;box-sizing: border-box}

view,text,block{

? ? font-family: "Microsoft Yahei"

}

/* 類型描述 */

.type1{

? padding-top: 10rpx;

? display: block;

? font-size: 30rpx;

? color: #323232;

? width:100%;

? overflow: hidden;

? text-overflow: ellipsis;

? display: -webkit-box;

? -webkit-line-clamp:2;

? -webkit-box-orient: vertical;

}

.type2{

? display: flex;

? font-size: 28rpx;

? color: #666;

? width:100%;

? padding-top: 20rpx;box-sizing: border-box

}

/* 數(shù)量 */

.num{

? width: 140rpx;

? height: 40rpx;

? border: 1px solid #eee;

? margin-top: 15rpx;

? background: #fff

}

.num2{

? float: left;

? width: 56rpx;

? line-height: 40rpx;

? text-align: center;

font-size: 28rpx;

color: #666666

}

.num1{float: left;

width: 40rpx;

height: 40rpx;

line-height: 40rpx;

text-align: center;

font-size: 36rpx;

padding: 0;

color: #4a4949;

border-right: 1px solid #eee;

}

.num3{

float: right;

width: 40rpx;

height: 40rpx;

line-height: 40rpx;

text-align: center;

font-size: 36rpx;

padding: 0;

margin: 0;

border-radius: 0px;

color: #4a4949;

border-left: 1px solid #eee;

}

/* 價(jià)格 */

.price{flex: 3;font-size: 30rpx;color: #c90211;box-sizing: border-box;position: relative}

.price1{position: absolute;right: 0;top: 0}

.number{position: absolute;right: 0;top: 40rpx}

/* 刪除 */

.del{width: 50rpx;height: 50rpx;position: absolute;right: 0;bottom: 20rpx}

/*----------------------分割線-------------------? */

/**app.wxss**/

.container {

? height: 100%;

? display: flex;

? flex-direction: column;

? align-items: center;

? justify-content: space-between;

? padding: 200rpx 0;

? box-sizing: border-box;

}

/*----------------------分割線-------------------? */

/*首頁(yè)商品類樣式? */

.content{

? display: flex;

? flex-wrap:? wrap;

}

.content-1{

? width: 375rpx;

? /* height: 420rpx; */

? padding:20rpx 10rpx ;

? box-sizing: border-box;

? border-bottom: 2rpx solid #cccccc;

? border-right: 1rpx solid #cccccc;

}

.content-1 image{

? width: 374rpx;

? height: 252rpx;

? margin-left: -8rpx;

}

.content-1 .price .text-price{

? color: #b20000;

? font-size: 32rpx;

? font-weight: bold;

}

.content-1 .price .text-yj{

? color: #656565;

? font-size: 24rpx;

}

.content-1 .price .text-oldprice{

? text-decoration: line-through;

? color: #656565;

? font-size: 24rpx;

}

.content-1 .name .text-name{

? font-size: 28rpx;

? color: #323232;

}

.content-1 .dress{

? margin-top: 10rpx;

}

.content-1 .dress .dress-1{

? float: left;

? color: #989898;

? font-size: 24rpx;

}

.content-1 .dress .dress-2{

? float: right;

? color: #989898;

? font-size: 24rpx;

? margin-right: 20rpx;

}

如有疑問(wèn)請(qǐng)回復(fù)！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容