?

//WXML <!--導(dǎo)航條--> <view class="navbar"><lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap"><text>{{item}}</text></lable> </view> <!--全部--> <view hidden="{{currentTab!==0}}" class='total' style='background-color: #EBEBEB;'><view wx:if="{{list.length>0}}"><!-- 外層 --><view class='cont_count' wx:for="{{list}}" wx:key="key"><!-- 編號(hào) --><view class='seria'><label class='seriac_name'>訂單編號(hào)<text>{{item.binahao}}</text></label><!-- 訂單狀態(tài) --><label class='seriac_start'>{{item.start}}</label></view><!-- 列表 --><view class='list' wx:for="{{item.arry}}" wx:for-item="arr_item" wx:key="key"><!-- 列表圖片 --><image class='list_img' src='{{arr_item.image}}'></image><!-- 列表標(biāo)題 --><label class='list_name'>{{arr_item.name}}</label><!-- 列表價(jià)格 --><label class='list_money'>￥{{arr_item.money}}</label></view><!-- 計(jì)算 --><view class='count_eg'><!-- 居中 --><view class='count_cent'><!-- 共兩件商品 --><label class='cont_cent_name'>共{{item.cont_count}}件商品</label><!-- 合計(jì) --><lable class='cont_cen_money'><text class='cont_ce_mon'>合計(jì):￥{{item.count_money}}</text></lable></view></view><!-- 標(biāo)簽功能 --><view class='coent_list'><!-- 取消訂單 --><label class='coent_del' data-index='{{index}}'>取消訂單</label><!-- 確認(rèn)收貨 --><label class='coent_log_base' data-index='{{index}}'>確認(rèn)收貨</label></view></view></view><!-- 否則 --><view wx:else><!-- 外層 --><view class='cont_count'><label class='none_tab'>親,您還暫未下單哦~~</label></view></view></view><!--代付款--> <view hidden="{{currentTab!==1}}"></view> <!-- 代發(fā)貨 --> <view hidden="{{currentTab!==2}}"></view> <!-- 待收貨 --> <view hidden="{{currentTab!==3}}"><!-- --> </view> <!-- 已完成 --> <view hidden="{{currentTab!==4}}"></view> //JS var app = getApp() Page({data: {// 頂部菜單切換navbar: ['全部', '代付款', "代發(fā)貨", "待收貨", "已完成"],// 默認(rèn)選中菜單currentTab: 0,index: 0,pick_name: "",// list數(shù)據(jù)list: [{binahao: "3124356568797697978",start: "已發(fā)貨",arry: [{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},],cont_count: "2",count_money: "112",}, {binahao: "3124356568797697978",start: "已發(fā)貨",arry: [{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},],cont_count: "2",count_money: "112",}, {binahao: "3124356568797697978",start: "已發(fā)貨",arry: [{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},{name: "這里是昵稱這里是昵稱這里是昵稱這里是昵稱這里是昵稱",image: "../image/a.jpg",money: "56",},],cont_count: "2",count_money: "112",},],},// 初始化加載onLoad: function() {var that = this;},//頂部tab切換navbarTap: function(e) {this.setData({currentTab: e.currentTarget.dataset.idx})},}) //WXSS /* 頂部菜單切換 */ .navbar{ display: flex; background: #fff; } .none_tab{position: relative;top: 20rpx;color: #999;font-size: 32rpx; } /* 默認(rèn)選中菜單 */ .navbar .item{ position: relative; flex: auto; font-size: 27rpx;width: 100rpx;text-align: center; line-height: 80rpx; color: #333;border-bottom: 6rpx solid #ddd; } /* 選中菜單樣式 */ .navbar .item.active{ color: #333333; border-bottom: 6rpx solid #D66058;} /* 字體 */ .navbar .item.active:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 4rpx; } /* 全部 */ .cont_count{padding-top: 6rpx;position: relative;width: 100%;text-align: center;/* height: 620rpx; */ /* border-bottom: 6rpx solid #ddd; */ margin-bottom: 6rpx;background-color:#fff; } /* 編號(hào) */ .seria{position: relative;display: inline-block;width: 90%;height: 70rpx;line-height: 70rpx;/* background-color: yellow; */border-bottom: 1rpx solid #D4D4D4; } /* 訂單lab */ .seriac_name{position: absolute;font-size: 28rpx;color: #333;left: 0rpx; } .seriac_name text{ margin-left: 15rpx; } /* 訂單狀態(tài) */ .seriac_start{position: absolute;right:0rpx;color: #999;font-size: 28rpx; }/* 列表 */ .list{position: relative;width: 90%;display: inline-block;padding-bottom: 10rpx;height: 200rpx; } /* 列表圖片 */ .list_img{position: absolute;width:144rpx;height: 144rpx;left: 0rpx;top: 30rpx; } /* 列表標(biāo)題 */ .list_name{ position: absolute;text-align: left;top: 30rpx;left: 180rpx;color: #333333;width: 350rpx;font-size: 30rpx;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} /* 列表價(jià)格 */ .list_money{position: absolute;font-size: 32rpx;right: 0rpx;bottom: 30rpx; }/* 總和 */ .count_eg{position: relative;width: 100%;height: 90rpx;line-height: 90rpx;border-bottom: 2rpx solid #EBEBEB;/* background-color: red; */ } /* 總和居中 */ .count_cent{position: relative;width: 90%;display: inline-block;height: 90rpx;line-height: 90rpx; } /* 商品數(shù)量 */ .cont_cent_name{position: relative;font-size: 28rpx; float: right; } .cont_ce_mon{font-size: 28rpx; } /* 總計(jì)金額 */ .cont_cen_money{position: relative;font-size: 28rpx;margin-right: 15rpx;float: right; }/* 標(biāo)簽功能 */ .coent_list{position: relative;width: 100%;height: 150rpx;line-height: 150rpx;/* border-bottom: 6rpx solid #ddd; */background-color: #fff; } /* 刪除 */ .coent_del{position: absolute;top: 30%;right: 270rpx;display: inline-block;width: 180rpx;text-align: center;height: 56rpx;border: 1rpx solid #d3d3d3; font-size: 30rpx; line-height: 56rpx; }/* 取消 */ .coent_log_base{position: absolute;top: 30%;color: darkgoldenrod;right: 40rpx;display: inline-block;width: 180rpx;height: 56rpx;text-align: center;border: 1rpx solid darkgoldenrod; font-size: 30rpx; line-height: 56rpx; }

?

總結(jié)

以上是生活随笔為你收集整理的小程序简单订单布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。