微信小程序點擊頁面tab欄切換

wxml

<view class="container"><view class="swiper-tab"><block wx:for="{{swipertab}}" wx:key="sptab"><view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}"bindtap="tabSwitch">{{item.name}}</view></block></view><swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px"bindchange="tabChange"><!-- 待付款 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key="index"><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">下單時間: {{item.time}}</view><text class="productPrice">當前狀態：{{item.status}}</text></view></view><view class="productCount"><view><text>合計：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item><!-- 待發貨 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key="index"><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">下單時間: {{item.time}}</view><text class="productPrice">當前狀態：{{item.status}}</text></view></view><view class="productCount"><view><text>合計：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item><!-- 待收貨 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{lostOrder}}" wx:key="index"><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">下單時間: {{item.time}}</view><text class="productPrice">當前狀態：{{item.status}}</text></view></view><view class="productCount"><view><text>合計：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item><!-- 售后訂單 --><swiper-item><scroll-view class="hot-box" scroll-y="true"><view class="orderDetails" wx:for="{{endOrder}}" wx:key="index"><view class="orderListTitle"><text class="userName">{{item.name}}</text><text class="orderStatus">{{item.state}}</text></view><view class="orderListDetails"><view class="productImg"><image src="{{item.url}}" background-size="cover"></image></view><view class="productInfo"><view class="productTitle">下單時間: {{item.time}}</view><text class="productPrice">當前狀態：{{item.status}}</text></view></view><view class="productCount"><view><text>合計：￥{{item.money}}</text></view></view></view></scroll-view></swiper-item></swiper> </view>

** wxss**

.swiper-tab {height: 80rpx;line-height: 80rpx;background: #ffffff;columns: #999999;display: flex;position: relative;z-index: 2;flex-direction: row;justify-content: space-around;align-items: center;border-bottom: 2rpx solid #e6e6e6; }.swiper-tab-list {padding: 0 8rpx;font-size: 30rpx; }.on {border-bottom: 8rpx solid #ff9908;color: #ff9908 }.navTopList {display: flex;width: 100%;height: 70rpx;background: #fff;border-bottom: 1rpx solid #e6e6e6;margin-top: 10rpx; }.navTopList .order-info {text-align: center; }.navTopList .order-info view {width: 56rpx;height: 56rpx;margin-left: 31rpx; }.navTopList .order-info text {font-size: 34rpx; }.navTopList .order-info text.active {color: #ff6662; }.navTopList .ywc, .navTopList .dfk, .navTopList .yqx {flex: 1; }/*訂單列表*/ .orderDetails {background: #fff;border-bottom: 20rpx solid #f5f5f5; }.orderListTitle {height: 100rpx;line-height: 100rpx;border-bottom: 1rpx solid #BEBEBE; }.orderListTitle .userName {padding-right: 50rpx;margin-left: 10px; }.orderListTitle .orderStatus {float: right;margin-right: 20rpx;color: #2f7b27;font-size: 34rpx; }.orderListDetails {display: flex;height: 200rpx;border-bottom: 1rpx solid #f3f3f3; }.orderListDetails .productImg {flex: 1;height: 180rpx;width: 120px;margin-top: 20rpx;margin-left: 20rpx; }.orderListDetails .productImg image {width: 100px;height: 90%; }.orderListDetails .productInfo {flex: 4;margin: 40rpx 10px 20px 30rpx;font-size: 15px;}.orderListDetails .productInfo .productTitle {font-size: 15px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 10px; }.productCount {height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #f3f3f3; }.productCount>view {float: right;margin-right: 30rpx; }

** js**

Page({/*** 頁面的初始數據*/data: {currtab: 0,swipertab: [{ name: '待付款', index: 0 }, { name: '待發貨', index: 1 }, { name: '待收貨', index: 2 },{ name: '售后訂單', index: 3 }],goods_arr:[{name:'夏桑菊',specs:'10袋',company:'廣州白云山制藥有限公司',price:'6.20',total:'12.40'},{name:'夏桑菊',specs:'10袋',company:'廣州白云山制藥有限公司',price:'6.20',total:'12.40'}],order_status:false,},onLoad: function (options) {console.log('傳值',options.id,this)const that=this;if(options.id!=0){that.setData({currtab: options.id})}},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {// 頁面渲染完成this.getDeviceInfo()this.orderShow()},getDeviceInfo: function () {let that = thiswx.getSystemInfo({success: function (res) {that.setData({deviceW: res.windowWidth,deviceH: res.windowHeight})}})},/*** @Explain：選項卡點擊切換*/tabSwitch: function (e) {console.log('值',e)var that = thisif (this.data.currtab === e.target.dataset.current) {return false} else {that.setData({currtab: e.target.dataset.current})}},tabChange: function (e) {console.log('數值',e)this.setData({ currtab: e.detail.current })this.orderShow()},orderShow: function () {let that = thisswitch (this.data.currtab) {case 0:that.waitPayShow()breakcase 1:that.alreadyShow()breakcase 2:that.lostShow()breakcase 3:that.endShow()break}},waitPayShow:function(){this.setData({waitPayOrder: [{ name: "清熱消炎寧膠囊", state: "待付款", time: "2018-10-14 14:00-16:00", status: "待付款", url: "/public/orther_img/produce_bg.png", money: "186" }],})},alreadyShow: function(){this.setData({alreadyOrder: [{ name: "清熱消炎寧膠囊", state: "待發貨", time: "2018-09-30 14:00-16:00", status: "待發貨", url: "/public/orther_img/produce_bg.png", money: "132" }, { name: "清熱消炎寧膠囊", state: "待發貨", time: "2018-10-12 18:00-20:00", status: "待發貨", url: "/public/orther_img/produce_bg.png", money: "205" }]})},lostShow: function () {this.setData({lostOrder: [{ name: "清熱消炎寧膠囊", state: "待收貨", time: "2018-10-4 10:00-12:00", status: "待收貨", url: "/public/orther_img/produce_bg.png", money: "122" }],})},endShow: function () {this.setData({endOrder: [{ name: "清熱消炎寧膠囊", state: "售后訂單", time: "2018-10-4 10:00-12:00", status: "退款成功", url: "/public/orther_img/produce_bg.png", money: "122" }],})}, })

總結

以上是生活随笔為你收集整理的微信小程序点击页面tab栏切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。