微信小程式-訂單頁面
阿新 • • 發佈：2018-12-12
說明：頭部有一個三種預約狀態的切換
wxml頁面：
<!-- 切換欄 --> <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="{{alreadyOrder}}" wx:key=" "> <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="{{waitPayOrder}}" wx:key=" "> <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=" "> <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>
wxss樣式：
/*切換欄*/ .swiper-tab { height: 40px; line-height: 40px; background: #3B3B3B; color:#fff ; display: flex; position: relative; z-index: 2; flex-direction: row; justify-content: center; align-items: center; border-bottom:1px solid black; } .swiper-tab-list { margin: 0 30px; padding: 0 4px; font-size: 15px; } .on { border-bottom:2px solid #fff; color: #f5f5f5; } .navTopList { display: flex; width: 100%; height: 70rpx; background: #fff; border-bottom: 1rpx solid #BEBEBE ; margin-top:5px; } .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：主要是在data中給切換欄配置引數，和預設顯示第幾個欄；
// pages/order/order.js Page({ /** * 頁面的初始資料 */ data: { currtab: 0, swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }], }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { // 頁面渲染完成 this.getDeviceInfo() this.orderShow() }, getDeviceInfo: function () { let that = this wx.getSystemInfo({ success: function (res) { that.setData({ deviceW: res.windowWidth, deviceH: res.windowHeight }) } }) }, /** * @Explain：選項卡點選切換 */ tabSwitch: function (e) { var that = this if (this.data.currtab === e.target.dataset.current) { return false } else { that.setData({ currtab: e.target.dataset.current }) } }, tabChange: function (e) { this.setData({ currtab: e.detail.current }) this.orderShow() }, orderShow: function () { let that = this switch (this.data.currtab) { case 0: that.alreadyShow() break case 1: that.waitPayShow() break case 2: that.lostShow() break } }, alreadyShow: function(){ this.setData({ alreadyOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已結束", url: "../../images/bad0.png", money: "132" }, { name: "躍動體育運動俱樂部(圓明園店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未開始", url: "../../images/bad3.jpg", money: "205" }] }) }, waitPayShow:function(){ this.setData({ waitPayOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未開始", url: "../../images/bad1.jpg", money: "186" }], }) }, lostShow: function () { this.setData({ lostOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未開始", url: "../../images/bad1.jpg", money: "122" }], }) }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })